@purestack/ts-components 1.1.0

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "@purestack/ts-components",
+  "version": "1.1.0",
+  "packageManager": "yarn@4.9.2",
+  "module": "./dist/ts-components.mjs",
+  "types": "./dist/ts-components.d.mts",
+  "type": "module",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PureStackStudio/PureStack.git",
+    "directory": "packages/ts-components"
+  },
+  "homepage": "https://purestack.studio",
+  "bugs": {
+    "url": "https://github.com/PureStackStudio/PureStack/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/ts-components.d.mts",
+      "source": "./src/index.ts",
+      "import": "./dist/ts-components.mjs"
+    }
+  },
+  "license": "MIT",
+  "files": [
+    "dist/*.mjs",
+    "dist/*.mjs.map",
+    "dist/*.d.mts",
+    "dist/*.d.mts.map",
+    "src/**/*.ts",
+    "!src/test/**",
+    "!src/**/*.test.ts",
+    "!src/**/*.spec.ts",
+    "tsconfig.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "regor-components": "yarn tsx ../../scripts/regor-components.ts",
+    "lint": "biome check ./src --formatter-enabled=false --write",
+    "test": "vitest"
+  },
+  "devDependencies": {
+    "@purestack/ts-minidom": "^1.1.0",
+    "@purestack/ts-render": "^1.1.0"
+  },
+  "dependencies": {
+    "@purestack/ts-common": "^1.1.0",
+    "@purestack/ts-css": "^1.1.0",
+    "@purestack/ts-page-scripts": "^1.1.0",
+    "@purestack/ts-style": "^1.1.0",
+    "@purestack/ts-util": "^1.1.0",
+    "regor": "^1.7.3"
+  },
+  "regorComponents": [
+    "AlertBox",
+    "AppForm",
+    "AutoCompleteInput",
+    "AutoCompleteOptionRow",
+    "Badge",
+    "BarChart",
+    "Btn",
+    "BtnGroup",
+    "BtnGroupDropDown",
+    "BtnLink",
+    "CodeShowcase",
+    "ComparisonColumn",
+    "ComparisonFeature",
+    "ComparisonTable",
+    "Composer",
+    "Consent",
+    "ContactForm",
+    "CtaSection",
+    "DoughnutChart",
+    "DropFiles",
+    "ExpandablePanel",
+    "FeatureCard",
+    "Flex",
+    "FormAssistLink",
+    "FormCheck",
+    "FormDivider",
+    "FormInputField",
+    "FormMeta",
+    "FormSelectField",
+    "FormStatus",
+    "FormSubmit",
+    "Grid",
+    "Icon",
+    "IconFrame",
+    "LandingBand",
+    "LandingSection",
+    "LineChart",
+    "MetricItem",
+    "MetricStrip",
+    "Modal",
+    "ModalStore",
+    "ModalTrigger",
+    "MultiAutoCompleteDefaultOptionRow",
+    "MultiAutoCompleteInput",
+    "NavList",
+    "NavMenu",
+    "PageLinks",
+    "PageScript",
+    "PageToc",
+    "Panel",
+    "PricingFeature",
+    "PricingPlan",
+    "PricingTable",
+    "RegorApp",
+    "SearchBox",
+    "SectionHeader",
+    "SignIn",
+    "SiteFooter",
+    "SiteLogo",
+    "TabPane",
+    "Tabs",
+    "ThemeToggle",
+    "ToastHost",
+    "TopBar",
+    "VariableVirtualList",
+    "VariableVirtualTable",
+    "VirtualList",
+    "VirtualTable"
+  ]
+}

package/src/defineComponents.ts

@@ -0,0 +1,87 @@
+import { defineAlertComponents } from './standard/alertBox/alertBox'
+import { defineBadgeComponents } from './standard/badge/badge'
+import { defineBarChartComponents } from './standard/barChart/barChart'
+import { defineButtonComponents } from './standard/btn/btn'
+import { defineBtnGroupComponents } from './standard/btnGroup/btnGroup'
+import { defineClassicLogoComponents } from './standard/classicLogo/classicLogo'
+import { defineComposerComponents } from './standard/composer/composer'
+import { defineConsentComponents } from './standard/consent/consent'
+import { defineContactFormComponents } from './standard/contactForm/contactForm'
+import { defineDoughnutChartComponents } from './standard/doughnutChart/doughnutChart'
+import { defineDropFilesComponents } from './standard/dropFiles/dropFiles'
+import { defineExpandablePanelComponents } from './standard/expandablePanel/expandablePanel'
+import { defineFlexComponents } from './standard/flex/flex'
+import { defineFooterComponents } from './standard/footer/footer'
+import { defineAutoCompleteInputComponents } from './standard/form/autoCompleteInput'
+import { defineFormComponents } from './standard/form/form'
+import { defineFormInputField } from './standard/form/formInputField'
+import { defineFormSelectField } from './standard/form/formSelectField'
+import { defineMultiAutoCompleteInputComponents } from './standard/form/multiAutoCompleteInput'
+import { defineGridComponents } from './standard/grid/grid'
+import { defineIconComponents, type GetSvgIcon } from './standard/icon/icon'
+import { defineLandingComponents } from './standard/landing/landing'
+import { defineLineChartComponents } from './standard/lineChart/lineChart'
+import { defineLogoComponents } from './standard/logo/logo'
+import { defineModalComponents } from './standard/modal/modal'
+import { defineNavigationComponents } from './standard/navMenu/navMenu'
+import { definePageLinksComponents } from './standard/pageLinks/pageLinks'
+import { defineScriptComponents } from './standard/pageScript/pageScript'
+import { definePageTocComponents } from './standard/pageToc/pageToc'
+import { definePanelComponents } from './standard/panel/panel'
+import { definePricingComponents } from './standard/pricing/pricing'
+import { defineSearchComponents } from './standard/searchBox/searchBox'
+import { defineSectionHeaderComponents } from './standard/sectionHeader/sectionHeader'
+import { defineSignInComponents } from './standard/signIn/signIn'
+import { defineTabsComponents } from './standard/tabs/tabs'
+import { defineThemeToggleComponents } from './standard/themeToggle/themeToggle'
+import { defineToastComponents } from './standard/toast/toastHost'
+import { defineTopBarComponents } from './standard/topBar/topBar'
+import { defineVariableVirtualTableComponents } from './standard/virtualList/variableVirtualTable'
+import { defineVirtualListComponents } from './standard/virtualList/virtualList'
+import { defineVirtualTableComponents } from './standard/virtualList/virtualTable'
+
+export function defineComponents(getSvgIcon: GetSvgIcon) {
+  return {
+    ...defineAlertComponents(),
+    ...defineBarChartComponents(),
+    ...defineBadgeComponents(),
+    ...defineButtonComponents(),
+    ...defineBtnGroupComponents(),
+    ...defineConsentComponents(),
+    ...defineContactFormComponents(),
+    ...defineComposerComponents(),
+    ...defineDoughnutChartComponents(),
+    ...defineDropFilesComponents(),
+    ...defineExpandablePanelComponents(),
+    ...defineFlexComponents(),
+    ...defineFooterComponents(),
+    ...defineAutoCompleteInputComponents(),
+    ...defineFormComponents(),
+    ...defineFormInputField(),
+    ...defineFormSelectField(),
+    ...defineMultiAutoCompleteInputComponents(),
+    ...defineGridComponents(),
+    ...defineIconComponents(getSvgIcon),
+    ...defineLandingComponents(),
+    ...defineLineChartComponents(),
+    ...defineLogoComponents(),
+    ...defineClassicLogoComponents(),
+    ...defineModalComponents(),
+    ...defineTopBarComponents(),
+    ...defineThemeToggleComponents(),
+    ...defineToastComponents(),
+    ...defineVirtualListComponents(),
+    ...defineVirtualTableComponents(),
+    ...defineVariableVirtualTableComponents(),
+    ...defineNavigationComponents(),
+    ...definePanelComponents(),
+    ...definePageLinksComponents(),
+    ...definePageTocComponents(),
+    ...definePricingComponents(),
+    ...defineSearchComponents(),
+    ...defineSectionHeaderComponents(),
+    ...defineSignInComponents(),
+    ...defineTabsComponents(),
+    ...defineScriptComponents(),
+  }
+}

package/src/index.ts

@@ -0,0 +1,270 @@
+export type {
+  ClassicLogoConfig,
+  LogoAppearance,
+  LogoConfig,
+  LogoLayout,
+  LogoMarkStyle,
+  LogoShape,
+  LogoSize,
+  LogoWordmarkStyle,
+  SiteLogoConfig,
+} from '@purestack/ts-common'
+export type {
+  TsSsgMenusApi,
+  TsSsgModalApi,
+  TsSsgTabsApi,
+} from '@purestack/ts-page-scripts'
+export { defineComponents } from './defineComponents'
+export { registerStyles } from './registerStyles'
+export type { AlertBox } from './standard/alertBox/alertBox'
+export { defineAlertComponents } from './standard/alertBox/alertBox'
+export type { Badge } from './standard/badge/badge'
+export { defineBadgeComponents } from './standard/badge/badge'
+export { registerBadgeStyles } from './standard/badge/badgeStyle'
+export type {
+  BarChart,
+  BarChartItem,
+  ResolvedBarChartGridLine,
+  ResolvedBarChartItem,
+} from './standard/barChart/barChart'
+export { defineBarChartComponents } from './standard/barChart/barChart'
+export { registerBarChartStyles } from './standard/barChart/barChartStyle'
+export type {
+  Btn,
+  BtnIconPosition,
+  BtnLink,
+  BtnSize,
+  BtnType,
+} from './standard/btn/btn'
+export { defineButtonComponents } from './standard/btn/btn'
+export { registerButtonStyles } from './standard/btn/btnStyle'
+export type {
+  BtnGroup,
+  BtnGroupAlign,
+  BtnGroupDropDown,
+  BtnGroupDropDownAlign,
+} from './standard/btnGroup/btnGroup'
+export { defineBtnGroupComponents } from './standard/btnGroup/btnGroup'
+export { registerBtnGroupStyles } from './standard/btnGroup/btnGroupStyle'
+export type { ClassicLogo } from './standard/classicLogo/classicLogo'
+export { defineClassicLogoComponents } from './standard/classicLogo/classicLogo'
+export { registerClassicLogoStyles } from './standard/classicLogo/classicLogoStyle'
+export type {
+  ComponentVariant,
+  ComponentVariantMode,
+} from './standard/componentVariant'
+export type { Composer, ComposerCommand } from './standard/composer/composer'
+export {
+  COMPOSER_BODY_STYLE,
+  createComposerBodyHtml,
+  defineComposerComponents,
+} from './standard/composer/composer'
+export { registerComposerStyles } from './standard/composer/composerStyle'
+export type { EmailHtmlPolicyOptions } from './standard/composer/emailHtmlPolicy'
+export {
+  applySafeEmailStyles,
+  copySafeEmailStyles,
+  GMAIL_COMPATIBLE_EMAIL_TAGS,
+  GMAIL_SUPPORTED_CSS_PROPERTIES,
+  normalizeEmailCidUrl,
+  normalizeEmailContentId,
+  sanitizeEmailStyleValue,
+  sanitizePlainAttribute,
+  toSafeEmailImageUrl,
+} from './standard/composer/emailHtmlPolicy'
+export type { Consent, ConsentCategoryState } from './standard/consent/consent'
+export { defineConsentComponents } from './standard/consent/consent'
+export { registerConsentStyles } from './standard/consent/consentStyle'
+export type { ContactForm } from './standard/contactForm/contactForm'
+export { defineContactFormComponents } from './standard/contactForm/contactForm'
+export { registerContactFormStyles } from './standard/contactForm/contactFormStyle'
+export type {
+  DoughnutChart,
+  DoughnutChartSegment,
+  ResolvedDoughnutChartSegment,
+} from './standard/doughnutChart/doughnutChart'
+export { defineDoughnutChartComponents } from './standard/doughnutChart/doughnutChart'
+export { registerDoughnutChartStyles } from './standard/doughnutChart/doughnutChartStyle'
+export type {
+  DropFileItem,
+  DropFiles,
+  DropFilesAddOptions,
+  DropFilesAddResult,
+  DropFilesIconMap,
+} from './standard/dropFiles/dropFiles'
+export {
+  addDropFiles,
+  defineDropFilesComponents,
+} from './standard/dropFiles/dropFiles'
+export { registerDropFilesStyles } from './standard/dropFiles/dropFilesStyle'
+export type { ExpandablePanel } from './standard/expandablePanel/expandablePanel'
+export { defineExpandablePanelComponents } from './standard/expandablePanel/expandablePanel'
+export { registerExpandablePanelStyles } from './standard/expandablePanel/expandablePanelStyle'
+export type {
+  Flex,
+  FlexAlign,
+  FlexDirection,
+  FlexJustify,
+  FlexWrap,
+} from './standard/flex/flex'
+export { defineFlexComponents } from './standard/flex/flex'
+export { registerFlexStyles } from './standard/flex/flexStyle'
+export type { SiteFooter } from './standard/footer/footer'
+export { defineFooterComponents } from './standard/footer/footer'
+export { registerFooterStyles } from './standard/footer/footerStyle'
+export type {
+  AutoCompleteInput,
+  AutoCompleteOption,
+  AutoCompleteOptionRow,
+  AutoCompleteRow,
+  AutoCompleteValue,
+  ResolvedAutoCompleteOption,
+} from './standard/form/autoCompleteInput'
+export { defineAutoCompleteInputComponents } from './standard/form/autoCompleteInput'
+export type {
+  AppForm,
+  FormAssistLink,
+  FormDivider,
+  FormMeta,
+  FormStatus,
+  FormSubmit,
+} from './standard/form/form'
+export { defineFormComponents } from './standard/form/form'
+export type { FormCheck } from './standard/form/formCheck'
+export { defineFormCheckComponent } from './standard/form/formCheck'
+export type { FormInputField } from './standard/form/formInputField'
+export { defineFormInputField } from './standard/form/formInputField'
+export type {
+  FormSelectField,
+  FormSelectOption,
+  FormSelectValue,
+} from './standard/form/formSelectField'
+export { defineFormSelectField } from './standard/form/formSelectField'
+export { registerFormStyles } from './standard/form/formStyle'
+export type {
+  MultiAutoCompleteCreateItem,
+  MultiAutoCompleteDefaultOptionRow,
+  MultiAutoCompleteInput,
+  MultiAutoCompleteItem,
+  MultiAutoCompleteItemsChange,
+  MultiAutoCompleteOptionRow,
+  MultiAutoCompleteOptionToItem,
+  MultiAutoCompleteSearch,
+  MultiAutoCompleteSelect,
+  MultiAutoCompleteSelectedRow,
+  MultiAutoCompleteSplitInput,
+  ResolvedMultiAutoCompleteItem,
+} from './standard/form/multiAutoCompleteInput'
+export { defineMultiAutoCompleteInputComponents } from './standard/form/multiAutoCompleteInput'
+export type { Grid } from './standard/grid/grid'
+export { defineGridComponents } from './standard/grid/grid'
+export { registerGridStyles } from './standard/grid/gridStyle'
+export type {
+  GetSvgIcon,
+  Icon,
+  IconFrame,
+  IconFrameSize,
+} from './standard/icon/icon'
+export { defineIconComponents } from './standard/icon/icon'
+export { registerIconStyles } from './standard/icon/iconStyle'
+export { defineCodeShowcaseComponent } from './standard/landing/codeShowcase'
+export { defineComparisonColumnComponent } from './standard/landing/comparisonColumn'
+export { defineComparisonFeatureComponent } from './standard/landing/comparisonFeature'
+export { defineComparisonTableComponent } from './standard/landing/comparisonTable'
+export { defineCtaSectionComponent } from './standard/landing/ctaSection'
+export { defineFeatureCardComponent } from './standard/landing/featureCard'
+export { defineLandingComponents } from './standard/landing/landing'
+export { defineLandingBandComponent } from './standard/landing/landingBand'
+export { defineLandingSectionComponent } from './standard/landing/landingSection'
+export type {
+  CodeShowcase,
+  ComparisonColumn,
+  ComparisonFeature,
+  ComparisonTable,
+  CtaSection,
+  FeatureCard,
+  LandingBand,
+  LandingBandEdge,
+  LandingBandImageFit,
+  LandingSection,
+  LandingTitleTag,
+  MetricItem,
+  MetricStrip,
+} from './standard/landing/landingTypes'
+export { defineMetricItemComponent } from './standard/landing/metricItem'
+export { defineMetricStripComponent } from './standard/landing/metricStrip'
+export type {
+  LineChart,
+  LineChartCurve,
+  LineChartPoint,
+  LineChartSeries,
+} from './standard/lineChart/lineChart'
+export { defineLineChartComponents } from './standard/lineChart/lineChart'
+export { registerLineChartStyles } from './standard/lineChart/lineChartStyle'
+export type { SiteLogo } from './standard/logo/logo'
+export { defineLogoComponents } from './standard/logo/logo'
+export { registerLogoStyles } from './standard/logo/logoStyle'
+export type {
+  Modal,
+  ModalSize,
+  ModalSlideFrom,
+  ModalTrigger,
+} from './standard/modal/modal'
+export { defineModalComponents } from './standard/modal/modal'
+export type {
+  ModalActionContract,
+  ModalContract,
+  ModalStore,
+} from './standard/modal/modalStore'
+export { useModalStore } from './standard/modal/modalStore'
+export { registerModalStyles } from './standard/modal/modalStyle'
+export type { NavItemState, NavList, NavMenu } from './standard/navMenu/navMenu'
+export { defineNavigationComponents } from './standard/navMenu/navMenu'
+export { registerNavStyles } from './standard/navMenu/navMenuStyle'
+export type { PageLinks } from './standard/pageLinks/pageLinks'
+export { definePageLinksComponents } from './standard/pageLinks/pageLinks'
+export type { PageToc, PageTocItem } from './standard/pageToc/pageToc'
+export { definePageTocComponents } from './standard/pageToc/pageToc'
+export { registerPageTocStyles } from './standard/pageToc/pageTocStyle'
+export type { Panel } from './standard/panel/panel'
+export { definePanelComponents } from './standard/panel/panel'
+export { registerPanelStyles } from './standard/panel/panelStyle'
+export type {
+  PricingFeature,
+  PricingPlan,
+  PricingTable,
+} from './standard/pricing/pricing'
+export { definePricingComponents } from './standard/pricing/pricing'
+export type { SearchBox } from './standard/searchBox/searchBox'
+export { defineSearchComponents } from './standard/searchBox/searchBox'
+export { registerSearchBoxStyles } from './standard/searchBox/searchBoxStyle'
+export type { SectionHeader } from './standard/sectionHeader/sectionHeader'
+export { defineSectionHeaderComponents } from './standard/sectionHeader/sectionHeader'
+export type { SignIn } from './standard/signIn/signIn'
+export { defineSignInComponents } from './standard/signIn/signIn'
+export { registerSignInStyles } from './standard/signIn/signInStyle'
+export type { TabPane, Tabs } from './standard/tabs/tabs'
+export { defineTabsComponents } from './standard/tabs/tabs'
+export { registerTabsStyles } from './standard/tabs/tabsStyle'
+export type { ThemeToggle } from './standard/themeToggle/themeToggle'
+export { defineThemeToggleComponents } from './standard/themeToggle/themeToggle'
+export { registerThemeToggleStyles } from './standard/themeToggle/themeToggleStyle'
+export type { ToastHost } from './standard/toast/toastHost'
+export { defineToastComponents } from './standard/toast/toastHost'
+export type { ToastItem } from './standard/toast/toastStore'
+export { ToastStore } from './standard/toast/toastStore'
+export type { TopBar } from './standard/topBar/topBar'
+export { defineTopBarComponents } from './standard/topBar/topBar'
+export { registerTopBarStyles } from './standard/topBar/topBarStyle'
+export type { VariableVirtualTable } from './standard/virtualList/variableVirtualTable'
+export { defineVariableVirtualTableComponents } from './standard/virtualList/variableVirtualTable'
+export type {
+  VariableVirtualList,
+  VirtualList,
+  VirtualListRow,
+} from './standard/virtualList/virtualList'
+export { defineVirtualListComponents } from './standard/virtualList/virtualList'
+export { registerVirtualListStyles } from './standard/virtualList/virtualListStyle'
+export type { VirtualTable } from './standard/virtualList/virtualTable'
+export { defineVirtualTableComponents } from './standard/virtualList/virtualTable'
+export { registerVirtualTableStyles } from './standard/virtualList/virtualTableStyle'

package/src/registerStyles.ts

@@ -0,0 +1,63 @@
+import { registerUtilityStyles } from '@purestack/ts-style'
+import { registerBadgeStyles } from './standard/badge/badgeStyle'
+import { registerBarChartStyles } from './standard/barChart/barChartStyle'
+import { registerButtonStyles } from './standard/btn/btnStyle'
+import { registerBtnGroupStyles } from './standard/btnGroup/btnGroupStyle'
+import { registerClassicLogoStyles } from './standard/classicLogo/classicLogoStyle'
+import { registerComposerStyles } from './standard/composer/composerStyle'
+import { registerConsentStyles } from './standard/consent/consentStyle'
+import { registerContactFormStyles } from './standard/contactForm/contactFormStyle'
+import { registerDoughnutChartStyles } from './standard/doughnutChart/doughnutChartStyle'
+import { registerDropFilesStyles } from './standard/dropFiles/dropFilesStyle'
+import { registerExpandablePanelStyles } from './standard/expandablePanel/expandablePanelStyle'
+import { registerFlexStyles } from './standard/flex/flexStyle'
+import { registerFooterStyles } from './standard/footer/footerStyle'
+import { registerFormStyles } from './standard/form/formStyle'
+import { registerGridStyles } from './standard/grid/gridStyle'
+import { registerIconStyles } from './standard/icon/iconStyle'
+import { registerLineChartStyles } from './standard/lineChart/lineChartStyle'
+import { registerLogoStyles } from './standard/logo/logoStyle'
+import { registerModalStyles } from './standard/modal/modalStyle'
+import { registerNavStyles } from './standard/navMenu/navMenuStyle'
+import { registerPageTocStyles } from './standard/pageToc/pageTocStyle'
+import { registerPanelStyles } from './standard/panel/panelStyle'
+import { registerSearchBoxStyles } from './standard/searchBox/searchBoxStyle'
+import { registerSignInStyles } from './standard/signIn/signInStyle'
+import { registerTabsStyles } from './standard/tabs/tabsStyle'
+import { registerThemeToggleStyles } from './standard/themeToggle/themeToggleStyle'
+import { registerTopBarStyles } from './standard/topBar/topBarStyle'
+import { registerVirtualListStyles } from './standard/virtualList/virtualListStyle'
+import { registerVirtualTableStyles } from './standard/virtualList/virtualTableStyle'
+
+export function registerStyles() {
+  registerUtilityStyles()
+  registerBarChartStyles()
+  registerBadgeStyles()
+  registerButtonStyles()
+  registerBtnGroupStyles()
+  registerComposerStyles()
+  registerConsentStyles()
+  registerContactFormStyles()
+  registerDoughnutChartStyles()
+  registerDropFilesStyles()
+  registerExpandablePanelStyles()
+  registerFlexStyles()
+  registerFooterStyles()
+  registerFormStyles()
+  registerGridStyles()
+  registerIconStyles()
+  registerLineChartStyles()
+  registerLogoStyles()
+  registerClassicLogoStyles()
+  registerModalStyles()
+  registerNavStyles()
+  registerPageTocStyles()
+  registerPanelStyles()
+  registerSearchBoxStyles()
+  registerSignInStyles()
+  registerTabsStyles()
+  registerThemeToggleStyles()
+  registerTopBarStyles()
+  registerVirtualListStyles()
+  registerVirtualTableStyles()
+}

package/src/standard/alertBox/alertBox.ts

@@ -0,0 +1,64 @@
+import type { SemanticTone } from '@purestack/ts-style'
+import { defineComponent, html, type RefOrValue } from 'regor'
+import type {
+  ComponentVariant,
+  ComponentVariantMode,
+} from '../componentVariant'
+
+export interface AlertBox {
+  title?: RefOrValue<string>
+  eyebrow?: RefOrValue<string>
+  badge?: RefOrValue<string>
+  meta?: RefOrValue<string>
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  variantMode?: RefOrValue<ComponentVariantMode>
+  icon?: RefOrValue<string>
+}
+
+const alertBoxTemplate = html`<Panel
+  :tone="tone || 'info'"
+  :variant="variant || 'surface'"
+  :variantMode="variantMode || 'stateless'"
+>
+  <Flex align="start">
+    <IconFrame
+      r-if="icon"
+      :name="icon"
+      :tone="tone || 'info'"
+      :variant="variant"/>
+    <Flex direction="column" align="start">
+      <Flex r-if="title || eyebrow || badge" align="center" wrap="true">
+        <span r-if="eyebrow">{{ eyebrow }}</span>
+        <strong r-if="title">{{ title }}</strong>
+        <Badge :tone="tone || 'info'" r-if="badge">{{ badge }}</Badge>
+      </Flex>
+      <div><slot></slot></div>
+      <Flex align="center" wrap="true">
+        <slot name="actions"></slot>
+      </Flex>
+      <small r-if="meta">{{ meta }}</small>
+    </Flex>
+  </Flex>
+</Panel>`
+
+function defineAlertBoxComponent() {
+  return defineComponent<AlertBox>(alertBoxTemplate, {
+    props: [
+      'title',
+      'eyebrow',
+      'badge',
+      'meta',
+      'tone',
+      'variant',
+      'variantMode',
+      'icon',
+    ],
+  })
+}
+
+export function defineAlertComponents() {
+  return {
+    alertBox: defineAlertBoxComponent(),
+  }
+}

package/src/standard/autoId.ts

@@ -0,0 +1,25 @@
+import { type RefOrValue, unref } from 'regor'
+
+export function createAutoId(prefix: string) {
+  let nextId = 1
+  return (value?: RefOrValue<string>) =>
+    resolveAutoId(value, () => createGeneratedId(prefix, nextId++))
+}
+
+function resolveAutoId(
+  value: RefOrValue<string> | undefined,
+  createNextId: () => string,
+) {
+  const id = unref(value)?.trim?.()
+  return id || createNextId()
+}
+
+function createGeneratedId(prefix: string, id: number) {
+  return isMinidomDocument(globalThis.document)
+    ? `${prefix}-s-${id}`
+    : `${prefix}-${id}`
+}
+
+function isMinidomDocument(document: Document) {
+  return (document as { isMinidom?: unknown })?.isMinidom === true
+}