Global Classes (Embed Format)

Global Classes adalah CSS classes named (mis. btn-primary, card-hover) yang dibuat di builder UI dan **disimpan di DB site**. Bisa di-apply ke banyak element. Editing class style langsung update semua element yang refer.

Reference dari element

Element refer ke class via shortId di top-level classes:

{
  "id": "btn001ax",
  "type": "button",
  "props": {...},
  "classes": ["7c58e7b3"]
}

shortId adalah handle 8-char (mirip element id) yang stabil — tidak berubah saat class di-rename.

Embed di Export Alus File

Saat kamu Export schema yang elementnya pakai global class, builder otomatis embed definisi class-nya di JSON:

{
  "source": "alusioCopiedElements",
  "version": "1.4.0",
  "exportedAt": "2026-05-09T10:00:00.000Z",
  "sourceUrl": "https://your-site.alusio.com",
  "elements": [
    {
      "id": "btn001ax",
      "type": "button",
      "props": { "text": "Beli", "link": "/checkout", "alignment": "center", "width": "auto" },
      "classes": ["7c58e7b3"]
    }
  ],
  "globalClasses": [
    {
      "id": "7c58e7b3",
      "name": "btn-primary",
      "desktopStyle": {
        "background": { "color": "#3b82f6" },
        "typography": { "color": "#ffffff", "fontWeight": "600" },
        "layout": { "paddingTop": "12px", "paddingBottom": "12px", "paddingLeft": "24px", "paddingRight": "24px" },
        "border": { "radius": { "topLeft": "8px", "topRight": "8px", "bottomLeft": "8px", "bottomRight": "8px" } }
      },
      "pseudoStates": {
        ":hover": {
          "desktop": { "background": { "color": "#2563eb" } }
        }
      }
    }
  ]
}

File ini portable — paste ke site lain dan class-nya ikut.

ExportedGlobalClass shape

interface ExportedGlobalClass {
  id: string                  // 8-char shortId
  name: string                // human label, used as DOM class="name"
  category?: string
  desktopStyle?: ElementStyle
  tabletStyle?: ElementStyle
  mobileStyle?: ElementStyle
  pseudoStates?: {
    [pseudo: string]: {       // ":hover" | ":active" | ":focus" | ":visited"
      desktop?: ElementStyle
      tablet?: ElementStyle
      mobile?: ElementStyle
    }
  }
}

ElementStyle terdiri dari group layout, typography, background, border, plus optional boxShadow. Drop group yang tidak dipakai.

Persist saat Import

Saat Import file dengan globalClasses, builder:

1. Pre-check konflik: bandingkan setiap incoming class dengan class existing di site target (by name)
   • Tidak ada class dengan name yang sama → create (tambah ke pool)
   • Name match + style identik → auto-skip (pakai existing)
   • Name match + style beda → conflict (modal pilih per-class)
2. Modal konflik muncul kalau ada perbedaan style. User pilih per class:
   • Skip — pakai class existing, abaikan style imported
   • Replace — overwrite style existing dengan imported (affect semua page yang pakai class ini)
   • Rename — insert sebagai nama baru (mis. btn-primary-imported)
3. Persist ke DB global_classes table (per-tenant).
4. Reusable di page lain — class baru muncul di pool, bisa di-apply via builder UI di page manapun.

Hand-craft globalClasses

Kamu bisa tulis manual di JSON tanpa pakai builder UI dulu — saat Import, class otomatis ter-persist ke pool:

{

  "elements": [
    {
      "id": "h001abcd",
      "type": "heading",
      "props": { "text": "Promo!", "level": "h2", "alignment": "center" },
      "classes": ["promo01"]
    }
  ],
  "globalClasses": [
    {
      "id": "promo01",
      "name": "promo-text",
      "desktopStyle": {
        "typography": { "color": "#dc2626", "fontWeight": "700" }
      }
    }
  ]
}

Setelah Import: class promo-text tersimpan di site → page lain bisa apply via builder.

Aturan validasi

• id: 4-20 char string
• name: 1-100 char, hanya [a-zA-Z0-9_-]+ (sama dengan CSS class name validator)
• desktopStyle dst: bentuk ElementStyle valid (layout/typography/background/border + boxShadow)
• Class dengan id sama tapi name beda di-treat sebagai class beda — name adalah primary identifier untuk konflik

Tips

• Pakai shortId 4-8 char yang tidak konflik dengan element id (boleh, tapi membingungkan saat baca JSON)
• Gunakan category untuk grouping di builder UI (mis. "buttons", "cards")
• Untuk shared design system, export → commit JSON ke Git → tim lain import = punya class & style yang sama