@scaleflex/dam-ui

The shared Lit UI layer for the Scaleflex DAM widgets. Theme, brand-color, i18n, and reusable style fragments — written once instead of re-implemented per widget.

Phase 3a ships the foundation below. Phase 3b adds the sfx-* primitive elements (button, input, modal, spinner, dropdown, checkbox, …), based on asset-picker's ap-* set.

Subpaths

• @scaleflex/dam-ui/theme — canonical --sfx-* tokens (themeTokens), back-compat alias fragments (aliasAssetPicker / aliasUploader / aliasLightDam), and applyBrandColor(el, hex) / applyTheme(el, tokens).
• @scaleflex/dam-ui/styles — Lit css fragments: resetStyles, focusStyles, buttonStyles.
• @scaleflex/dam-ui/i18n — createI18n({ gridUuid, namespace }) → a scoped bundle with initI18n, t, fallbackT, onChange, getInstance, and an I18nController.
• @scaleflex/dam-ui/primitives — the sfx-* Lit element classes (SfxIcon, SfxSpinner, SfxBadge, SfxTooltip, SfxPopover, SfxCheckbox, SfxRadioGroup, SfxDropdown, SfxAssetInfo). Importing them registers the custom elements.
• @scaleflex/dam-ui/define — side-effect entry that registers every sfx-* primitive.
• @scaleflex/dam-ui — re-exports theme + styles + i18n + the cspStyle directive, plus the guarded registration helpers defineElement / customElement.

Element registration (defineElement / customElement)

customElements.define() throws if a tag is already registered, so two copies of a widget on one page (version skew, or a host that also bundles a DAM package) would crash at import time. Register custom elements idempotently instead — the first definition wins, later ones no-op:

import { customElement, defineElement } from '@scaleflex/dam-ui';

// As a drop-in replacement for Lit's @customElement (same usage):
@customElement('sfx-thing')
export class SfxThing extends LitElement {}

// Or imperatively, e.g. in a side-effect define entry:
defineElement('sfx-thing', SfxThing);

Every sfx-* / ap-* element across the DAM widgets registers through these (use them instead of Lit's @customElement from lit/decorators or a raw customElements.define).

i18n usage

Each widget creates its own scoped instance (its own grid + namespace), so two widgets on one page don't fight over a single shared instance:

import { createI18n } from '@scaleflex/dam-ui/i18n';

export const { initI18n, t, I18nController } = createI18n({
  gridUuid: 'f7b2366e-…', // this widget's Wordplex grid
  namespace: 'uploader',
});

Theme usage

import { themeTokens, applyBrandColor } from '@scaleflex/dam-ui/theme';

static styles = [themeTokens, /* component css */];
// …and at runtime: applyBrandColor(this, '#2563eb');

lit is a peer dependency; i18next + i18next-http-backend are dependencies (kept external in the lib build, inlined in widget CDN builds).