@steez-ui/ui 0.1.4 → 0.1.6

package/dist/components/MarqueeStrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarqueeStrip.js","sourceRoot":"","sources":["../../src/components/MarqueeStrip.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAa/C,MAAM,UAAU,YAAY,CAAI,EAC9B,KAAK,EACL,UAAU,EACV,SAAS,EACT,eAAe,GAAG,EAAE,EACpB,GAAG,GAAG,QAAQ,EACd,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,EAAE,EACd,cAAc,GAAG,EAAE,EACnB,aAAa,GAAG,EAAE,EAClB,KAAK,EACL,GAAG,KAAK,EACa;IACrB,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG;QAClB,GAAG,KAAK;QACR,CAAC,oBAA8B,CAAC,EAAE,GAAG,eAAe,GAAG;QACvD,CAAC,eAAyB,CAAC,EACzB,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG;KACtB,CAAC;IAEzB,OAAO,CACL,cACE,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,gBAC9E,SAAS,EACrB,KAAK,EAAE,WAAW,KACd,KAAK,YAET,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,cAAc,EAAE,CAAC,IAAI,EAAE,YACvD,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,cAEE,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,aAAa,EAAE,CAAC,IAAI,EAAE,iBACtC,KAAK,IAAI,KAAK,CAAC,MAAM,YAEjC,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAJlC,KAAK,CAKN,CACP,CAAC,GACE,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"MarqueeStrip.js","sourceRoot":"","sources":["../../src/components/MarqueeStrip.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAa/C,MAAM,UAAU,YAAY,CAAI,EAC9B,KAAK,EACL,UAAU,EACV,SAAS,EACT,eAAe,GAAG,EAAE,EACpB,GAAG,GAAG,QAAQ,EACd,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,EAAE,EACd,cAAc,GAAG,EAAE,EACnB,aAAa,GAAG,EAAE,EAClB,KAAK,EACL,GAAG,KAAK,EACa;IACrB,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG;QAClB,GAAG,KAAK;QACR,CAAC,oBAA8B,CAAC,EAAE,GAAG,eAAe,GAAG;QACvD,CAAC,eAAyB,CAAC,EACzB,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG;KACtB,CAAC;IAEzB,OAAO,CACL,cACE,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,gBAC9E,SAAS,EACrB,KAAK,EAAE,WAAW,KACd,KAAK,YAET,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,cAAc,EAAE,CAAC,IAAI,EAAE,YACvD,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,cAEE,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,aAAa,EAAE,CAAC,IAAI,EAAE,iBACtC,KAAK,IAAI,KAAK,CAAC,MAAM,YAEjC,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAJlC,KAAK,CAKN,CACP,CAAC,GACE,GACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from \"react\";\n\nimport styles from \"./MarqueeStrip.module.css\";\n\nexport interface MarqueeStripProps<T> extends React.HTMLAttributes<HTMLDivElement> {\n  items: readonly T[];\n  renderItem: (item: T, index: number) => React.ReactNode;\n  ariaLabel?: string;\n  durationSeconds?: number;\n  gap?: number | string;\n  pauseOnHover?: boolean;\n  trackClassName?: string;\n  itemClassName?: string;\n}\n\nexport function MarqueeStrip<T>({\n  items,\n  renderItem,\n  ariaLabel,\n  durationSeconds = 24,\n  gap = \"0.7rem\",\n  pauseOnHover = false,\n  className = \"\",\n  trackClassName = \"\",\n  itemClassName = \"\",\n  style,\n  ...props\n}: MarqueeStripProps<T>) {\n  const doubledItems = [...items, ...items];\n  const mergedStyle = {\n    ...style,\n    [\"--marquee-duration\" as string]: `${durationSeconds}s`,\n    [\"--marquee-gap\" as string]:\n      typeof gap === \"number\" ? `${gap}px` : gap,\n  } as React.CSSProperties;\n\n  return (\n    <div\n      className={`${styles.root} ${pauseOnHover ? styles.pauseOnHover : \"\"} ${className}`.trim()}\n      aria-label={ariaLabel}\n      style={mergedStyle}\n      {...props}\n    >\n      <div className={`${styles.track} ${trackClassName}`.trim()}>\n        {doubledItems.map((item, index) => (\n          <div\n            key={index}\n            className={`${styles.item} ${itemClassName}`.trim()}\n            aria-hidden={index >= items.length}\n          >\n            {renderItem(item, index % items.length)}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/components/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/components/PageHeader.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG7D,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAoB7C,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,EACL,YAAY,EACZ,UAAU,EACV,cAAc,EACd,MAAM,EACN,UAAU,EACV,cAAc,EACd,aAAa,EACb,eAAe,GAAG,aAAa,EAC/B,eAAe,GAAG,aAAa,GACf;IAChB,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC;IAEtE,OAAO,CACL,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,YACpD,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC9B,eAAK,SAAS,EAAE,MAAM,CAAC,YAAY,aAChC,KAAK,IAAI,YAAY,CAAC,CAAC,CAAC,CACvB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,UAAU,gBACL,cAAc,YAE1B,eAAM,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,GACjE,CACV,CAAC,CAAC,CAAC,IAAI,EACR,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aAClC,yBACG,IAAI,CAAC,CAAC,CAAC,CACN,eAAM,SAAS,EAAE,MAAM,CAAC,SAAS,YAC/B,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GACtC,CACR,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,IACH,EACJ,WAAW,CAAC,CAAC,CAAC,sBAAI,WAAW,GAAK,CAAC,CAAC,CAAC,IAAI,IACtC,IACF,EACN,eAAK,SAAS,EAAE,MAAM,CAAC,WAAW,aAC/B,KAAK,EACL,MAAM,CAAC,CAAC,CAAC,CACR,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,gBAAa,SAAS,YACvF,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC3C,CACV,CAAC,CAAC,CAAC,IAAI,EACP,UAAU,CAAC,CAAC,CAAC,CACZ,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,UAAU,gBAAa,eAAe,YACjG,KAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC/B,CACV,CAAC,CAAC,CAAC,IAAI,EACP,cAAc,CAAC,CAAC,CAAC,CAChB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,OAAO,EAAE,cAAc,gBACX,WAAW,EACvB,KAAK,EAAE,WAAW,YAElB,KAAC,OAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC3B,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,IACF,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/components/PageHeader.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG7D,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAoB7C,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,EACL,YAAY,EACZ,UAAU,EACV,cAAc,EACd,MAAM,EACN,UAAU,EACV,cAAc,EACd,aAAa,EACb,eAAe,GAAG,aAAa,EAC/B,eAAe,GAAG,aAAa,GACf;IAChB,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC;IAEtE,OAAO,CACL,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,YACpD,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC9B,eAAK,SAAS,EAAE,MAAM,CAAC,YAAY,aAChC,KAAK,IAAI,YAAY,CAAC,CAAC,CAAC,CACvB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,UAAU,gBACL,cAAc,YAE1B,eAAM,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,GACjE,CACV,CAAC,CAAC,CAAC,IAAI,EACR,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aAClC,yBACG,IAAI,CAAC,CAAC,CAAC,CACN,eAAM,SAAS,EAAE,MAAM,CAAC,SAAS,YAC/B,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GACtC,CACR,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,IACH,EACJ,WAAW,CAAC,CAAC,CAAC,sBAAI,WAAW,GAAK,CAAC,CAAC,CAAC,IAAI,IACtC,IACF,EACN,eAAK,SAAS,EAAE,MAAM,CAAC,WAAW,aAC/B,KAAK,EACL,MAAM,CAAC,CAAC,CAAC,CACR,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,gBAAa,SAAS,YACvF,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC3C,CACV,CAAC,CAAC,CAAC,IAAI,EACP,UAAU,CAAC,CAAC,CAAC,CACZ,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,UAAU,gBAAa,eAAe,YACjG,KAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC/B,CACV,CAAC,CAAC,CAAC,IAAI,EACP,cAAc,CAAC,CAAC,CAAC,CAChB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,OAAO,EAAE,cAAc,gBACX,WAAW,EACvB,KAAK,EAAE,WAAW,YAElB,KAAC,OAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC3B,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,IACF,GACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React, { ReactNode } from \"react\";\n\nimport { EyeIcon, Icon, SlidersIcon } from \"@steez-ui/icons\";\nimport type { SteezIconName } from \"@steez-ui/icons\";\n\nimport styles from \"./PageHeader.module.css\";\n\nexport interface PageHeaderProps {\n  title: string;\n  description?: string;\n  icon?: SteezIconName;\n  extra?: ReactNode;\n  className?: string;\n  brand?: ReactNode;\n  onBrandClick?: () => void;\n  brandTitle?: string;\n  brandAriaLabel?: string;\n  onBack?: () => void;\n  onSettings?: () => void;\n  onViewerToggle?: () => void;\n  viewerVisible?: boolean;\n  viewerShowLabel?: string;\n  viewerHideLabel?: string;\n}\n\nexport function PageHeader({\n  title,\n  description,\n  icon,\n  extra,\n  className = \"\",\n  brand,\n  onBrandClick,\n  brandTitle,\n  brandAriaLabel,\n  onBack,\n  onSettings,\n  onViewerToggle,\n  viewerVisible,\n  viewerShowLabel = \"Show viewer\",\n  viewerHideLabel = \"Hide viewer\",\n}: PageHeaderProps) {\n  const viewerLabel = viewerVisible ? viewerHideLabel : viewerShowLabel;\n\n  return (\n    <div className={`${styles.header} ${className}`.trim()}>\n      <div className={styles.headerRow}>\n        <div className={styles.brandCluster}>\n          {brand || onBrandClick ? (\n            <button\n              type=\"button\"\n              className={styles.brandButton}\n              onClick={onBrandClick}\n              title={brandTitle}\n              aria-label={brandAriaLabel}\n            >\n              <span className={styles.brandVisual}>{brand ?? title.slice(0, 1)}</span>\n            </button>\n          ) : null}\n          <div className={styles.headerContent}>\n            <h2>\n              {icon ? (\n                <span className={styles.titleIcon}>\n                  <Icon icon={icon} width={18} height={18} />\n                </span>\n              ) : null}\n              {title}\n            </h2>\n            {description ? <p>{description}</p> : null}\n          </div>\n        </div>\n        <div className={styles.headerExtra}>\n          {extra}\n          {onBack ? (\n            <button type=\"button\" className={styles.iconButton} onClick={onBack} aria-label=\"Go back\">\n              <Icon icon=\"chevronLeft\" width={18} height={18} />\n            </button>\n          ) : null}\n          {onSettings ? (\n            <button type=\"button\" className={styles.iconButton} onClick={onSettings} aria-label=\"Open settings\">\n              <SlidersIcon width={18} height={18} />\n            </button>\n          ) : null}\n          {onViewerToggle ? (\n            <button\n              type=\"button\"\n              className={styles.iconButton}\n              onClick={onViewerToggle}\n              aria-label={viewerLabel}\n              title={viewerLabel}\n            >\n              <EyeIcon width={18} height={18} />\n            </button>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/components/PageTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplate.js","sourceRoot":"","sources":["../../src/components/PageTemplate.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAwB,MAAM,iBAAiB,CAAC;AACnE,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAmC/C,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,cAAc,EACd,MAAM,EACN,UAAU,EACV,KAAK,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,UAAU,EACV,cAAc,EACd,eAAe,EACf,eAAe,EACf,QAAQ,EACR,OAAO,EACP,SAAS,GAAG,IAAI,EAChB,SAAS,GAAG,EAAE,GACI;IAClB,MAAM,WAAW,GAAG,KAAK,IAAI,OAAO,CAAC;IAErC,OAAO,CACL,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,aACjD,SAAS,CAAC,CAAC,CAAC,CACX,cAAK,SAAS,EAAE,MAAM,CAAC,MAAM,YAC3B,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe,GAChC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,EAEP,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CACjB,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,IAAI,EAAC,SAAS,gBAAa,GAAG,KAAK,WAAW,YAC3E,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,iBAEE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EACvC,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY,IAAI,YAAY,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,EACtG,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,YAAY,KAAK,GAAG,CAAC,EAAE,YAErC,GAAG,CAAC,KAAK,IAPL,GAAG,CAAC,EAAE,CAQJ,CACV,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,EAER,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC3B,OAAO,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,2BAAkB,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,GAC1E,IACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"PageTemplate.js","sourceRoot":"","sources":["../../src/components/PageTemplate.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAwB,MAAM,iBAAiB,CAAC;AACnE,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAmC/C,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,cAAc,EACd,MAAM,EACN,UAAU,EACV,KAAK,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,UAAU,EACV,cAAc,EACd,eAAe,EACf,eAAe,EACf,QAAQ,EACR,OAAO,EACP,SAAS,GAAG,IAAI,EAChB,SAAS,GAAG,EAAE,GACI;IAClB,MAAM,WAAW,GAAG,KAAK,IAAI,OAAO,CAAC;IAErC,OAAO,CACL,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,aACjD,SAAS,CAAC,CAAC,CAAC,CACX,cAAK,SAAS,EAAE,MAAM,CAAC,MAAM,YAC3B,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe,GAChC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,EAEP,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CACjB,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,IAAI,EAAC,SAAS,gBAAa,GAAG,KAAK,WAAW,YAC3E,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,iBAEE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EACvC,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY,IAAI,YAAY,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,EACtG,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,YAAY,KAAK,GAAG,CAAC,EAAE,YAErC,GAAG,CAAC,KAAK,IAPL,GAAG,CAAC,EAAE,CAQJ,CACV,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,EAER,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC3B,OAAO,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,2BAAkB,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,GAC1E,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from \"react\";\n\nimport { PageHeader, type PageHeaderProps } from \"./PageHeader.js\";\nimport styles from \"./PageTemplate.module.css\";\n\ninterface SubTab {\n  id: string;\n  label: string;\n}\n\nexport interface PageTemplateProps\n  extends Pick<\n    PageHeaderProps,\n    | \"title\"\n    | \"description\"\n    | \"icon\"\n    | \"onBack\"\n    | \"onSettings\"\n    | \"brand\"\n    | \"onBrandClick\"\n    | \"onViewerToggle\"\n    | \"viewerVisible\"\n  > {\n  actions?: React.ReactNode;\n  extra?: React.ReactNode;\n  className?: string;\n  subTabs?: SubTab[];\n  activeSubTab?: string;\n  onSubTabChange?: (tabId: string) => void;\n  children?: React.ReactNode;\n  loading?: boolean;\n  showTitle?: boolean;\n  brandTitle?: string;\n  brandAriaLabel?: string;\n  viewerShowLabel?: string;\n  viewerHideLabel?: string;\n}\n\nexport function PageTemplate({\n  title,\n  actions,\n  extra,\n  description,\n  icon,\n  subTabs,\n  activeSubTab,\n  onSubTabChange,\n  onBack,\n  onSettings,\n  brand,\n  onBrandClick,\n  onViewerToggle,\n  viewerVisible,\n  brandTitle,\n  brandAriaLabel,\n  viewerShowLabel,\n  viewerHideLabel,\n  children,\n  loading,\n  showTitle = true,\n  className = \"\",\n}: PageTemplateProps) {\n  const headerExtra = extra ?? actions;\n\n  return (\n    <div className={`${styles.root} ${className}`.trim()}>\n      {showTitle ? (\n        <div className={styles.header}>\n          <PageHeader\n            title={title}\n            description={description}\n            icon={icon}\n            extra={headerExtra}\n            onBack={onBack}\n            onSettings={onSettings}\n            brand={brand}\n            onBrandClick={onBrandClick}\n            brandTitle={brandTitle}\n            brandAriaLabel={brandAriaLabel}\n            onViewerToggle={onViewerToggle}\n            viewerVisible={viewerVisible}\n            viewerShowLabel={viewerShowLabel}\n            viewerHideLabel={viewerHideLabel}\n          />\n        </div>\n      ) : null}\n\n      {subTabs?.length ? (\n        <div className={styles.subTabs} role=\"tablist\" aria-label={`${title} sections`}>\n          {subTabs.map((tab) => (\n            <button\n              key={tab.id}\n              onClick={() => onSubTabChange?.(tab.id)}\n              className={`${styles.subTabButton} ${activeSubTab === tab.id ? styles.subTabButtonActive : \"\"}`.trim()}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={activeSubTab === tab.id}\n            >\n              {tab.label}\n            </button>\n          ))}\n        </div>\n      ) : null}\n\n      <div className={styles.content}>\n        {loading ? <div className={styles.loading}>Loading...</div> : children ?? null}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/components/QuickInfoCard.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface QuickInfoItem {
+    icon?: React.ReactNode;
+    label: string;
+    value: string | number;
+    valueColor?: "default" | "success" | "warning" | "danger";
+    mono?: boolean;
+}
+export interface StorageProgress {
+    used: number;
+    limit: number;
+}
+export interface QuickInfoCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: QuickInfoItem[];
+    storageProgress?: StorageProgress;
+    showCornerBrackets?: boolean;
+}
+export declare function QuickInfoCard({ items, storageProgress, className, showCornerBrackets, ...props }: QuickInfoCardProps): import("react/jsx-runtime").JSX.Element;
+export default QuickInfoCard;
+//# sourceMappingURL=QuickInfoCard.d.ts.map

package/dist/components/QuickInfoCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickInfoCard.d.ts","sourceRoot":"","sources":["../../src/components/QuickInfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAeD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,eAAe,EACf,SAAc,EACd,kBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAiEpB;AAED,eAAe,aAAa,CAAC"}

package/dist/components/QuickInfoCard.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./QuickInfoCard.module.css";
+function formatFileSize(bytes) {
+    if (bytes === 0) {
+        return "0 Bytes";
+    }
+    const base = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const unitIndex = Math.floor(Math.log(bytes) / Math.log(base));
+    return `${parseFloat((bytes / Math.pow(base, unitIndex)).toFixed(2))} ${sizes[unitIndex]}`;
+}
+export function QuickInfoCard({ items, storageProgress, className = "", showCornerBrackets = true, ...props }) {
+    const storageRatio = storageProgress
+        ? storageProgress.used / Math.max(storageProgress.limit, 1)
+        : 0;
+    const storageToneClass = storageRatio > 0.9
+        ? styles.storageDanger
+        : storageRatio > 0.7
+            ? styles.storageWarning
+            : "";
+    const getValueToneClass = (color) => {
+        switch (color) {
+            case "success":
+                return styles.valueSuccess;
+            case "warning":
+                return styles.valueWarning;
+            case "danger":
+                return styles.valueDanger;
+            default:
+                return "";
+        }
+    };
+    return (_jsxs("div", { className: `${styles.card} ${showCornerBrackets ? styles.cardWithBrackets : ""} ${className}`.trim(), ...props, children: [items.map((item, index) => (_jsxs("div", { className: styles.item, children: [item.icon ? _jsx("div", { className: styles.icon, children: item.icon }) : null, _jsxs("div", { className: styles.info, children: [_jsx("span", { className: styles.label, children: item.label }), _jsx("span", { className: `${styles.value} ${item.mono ? styles.valueMono : ""} ${getValueToneClass(item.valueColor)}`.trim(), children: item.value })] })] }, `${item.label}-${index}`))), storageProgress ? (_jsxs("div", { className: styles.storageProgress, children: [_jsxs("div", { className: styles.storageProgressLabel, children: [_jsx("span", { children: "Storage" }), _jsxs("span", { className: styles.storageProgressValue, children: [formatFileSize(storageProgress.used), " /", " ", formatFileSize(storageProgress.limit)] })] }), _jsx("div", { className: styles.storageProgressBar, children: _jsx("div", { className: `${styles.storageProgressFill} ${storageToneClass}`.trim(), style: {
+                                "--storage-progress-width": `${Math.min(storageRatio * 100, 100)}%`,
+                            } }) })] })) : null] }));
+}
+export default QuickInfoCard;
+//# sourceMappingURL=QuickInfoCard.js.map

package/dist/components/QuickInfoCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickInfoCard.js","sourceRoot":"","sources":["../../src/components/QuickInfoCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\n\nimport styles from \"./QuickInfoCard.module.css\";\n\nexport interface QuickInfoItem {\n  icon?: React.ReactNode;\n  label: string;\n  value: string | number;\n  valueColor?: \"default\" | \"success\" | \"warning\" | \"danger\";\n  mono?: boolean;\n}\n\nexport interface StorageProgress {\n  used: number;\n  limit: number;\n}\n\nexport interface QuickInfoCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: QuickInfoItem[];\n  storageProgress?: StorageProgress;\n  showCornerBrackets?: boolean;\n}\n\nfunction formatFileSize(bytes: number) {\n  if (bytes === 0) {\n    return \"0 Bytes\";\n  }\n\n  const base = 1024;\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\"];\n  const unitIndex = Math.floor(Math.log(bytes) / Math.log(base));\n  return `${parseFloat((bytes / Math.pow(base, unitIndex)).toFixed(2))} ${\n    sizes[unitIndex]\n  }`;\n}\n\nexport function QuickInfoCard({\n  items,\n  storageProgress,\n  className = \"\",\n  showCornerBrackets = true,\n  ...props\n}: QuickInfoCardProps) {\n  const storageRatio = storageProgress\n    ? storageProgress.used / Math.max(storageProgress.limit, 1)\n    : 0;\n  const storageToneClass =\n    storageRatio > 0.9\n      ? styles.storageDanger\n      : storageRatio > 0.7\n        ? styles.storageWarning\n        : \"\";\n\n  const getValueToneClass = (color?: QuickInfoItem[\"valueColor\"]) => {\n    switch (color) {\n      case \"success\":\n        return styles.valueSuccess;\n      case \"warning\":\n        return styles.valueWarning;\n      case \"danger\":\n        return styles.valueDanger;\n      default:\n        return \"\";\n    }\n  };\n\n  return (\n    <div\n      className={`${styles.card} ${showCornerBrackets ? styles.cardWithBrackets : \"\"} ${className}`.trim()}\n      {...props}\n    >\n      {items.map((item, index) => (\n        <div key={`${item.label}-${index}`} className={styles.item}>\n          {item.icon ? <div className={styles.icon}>{item.icon}</div> : null}\n          <div className={styles.info}>\n            <span className={styles.label}>{item.label}</span>\n            <span\n              className={`${styles.value} ${item.mono ? styles.valueMono : \"\"} ${getValueToneClass(item.valueColor)}`.trim()}\n            >\n              {item.value}\n            </span>\n          </div>\n        </div>\n      ))}\n      {storageProgress ? (\n        <div className={styles.storageProgress}>\n          <div className={styles.storageProgressLabel}>\n            <span>Storage</span>\n            <span className={styles.storageProgressValue}>\n              {formatFileSize(storageProgress.used)} /{\" \"}\n              {formatFileSize(storageProgress.limit)}\n            </span>\n          </div>\n          <div className={styles.storageProgressBar}>\n            <div\n              className={`${styles.storageProgressFill} ${storageToneClass}`.trim()}\n              style={\n                {\n                  \"--storage-progress-width\": `${Math.min(storageRatio * 100, 100)}%`,\n                } as React.CSSProperties\n              }\n            />\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport default QuickInfoCard;\n"]}

package/dist/components/QuickInfoCard.module.css

@@ -0,0 +1,138 @@
+.card {
+  display: flex;
+  gap: 1.5rem;
+  padding: 1rem 1.5rem;
+  margin: 0.75rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  flex-wrap: wrap;
+  position: relative;
+  overflow: visible;
+}
+
+.cardWithBrackets::before {
+  content: "";
+  position: absolute;
+  top: -0.5rem;
+  left: -0.5rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-top: 1px solid var(--border-color);
+  border-left: 1px solid var(--border-color);
+}
+
+.cardWithBrackets::after {
+  content: "";
+  position: absolute;
+  bottom: -0.5rem;
+  right: -0.5rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-bottom: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 150px;
+}
+
+.icon {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  color: var(--accent-primary);
+}
+
+.icon :global(svg) {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  flex: 1;
+}
+
+.label {
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.value {
+  color: var(--text-primary);
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.valueMono {
+  font-family: var(--font-mono);
+}
+
+.valueSuccess {
+  color: var(--color-success, #10b981);
+}
+
+.valueWarning {
+  color: var(--color-warning, #f59e0b);
+}
+
+.valueDanger {
+  color: var(--color-error, #ef4444);
+}
+
+.storageProgress {
+  flex: 1;
+  min-width: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.storageProgressLabel {
+  display: flex;
+  justify-content: space-between;
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.storageProgressValue {
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-weight: 600;
+}
+
+.storageProgressBar {
+  height: 8px;
+  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+}
+
+.storageProgressFill {
+  height: 100%;
+  width: var(--storage-progress-width, 0%);
+  background: var(--accent-primary);
+  border-radius: 3px;
+  transition: width 220ms ease;
+}
+
+.storageWarning {
+  background: var(--color-warning, #f59e0b);
+}
+
+.storageDanger {
+  background: var(--color-error, #ef4444);
+}

package/dist/components/RuntimeOrbitDiagram.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { SteezIconProps } from "@steez-ui/icons";
+export interface RuntimeOrbitNode {
+    id: string;
+    label: string;
+    icon: React.ComponentType<SteezIconProps>;
+    x: number;
+    y: number;
+}
+export interface RuntimeOrbitDiagramProps {
+    nodes: RuntimeOrbitNode[];
+    className?: string;
+    durationSeconds?: number;
+    pathOrder?: readonly string[];
+    iconSize?: number;
+}
+export declare function RuntimeOrbitDiagram({ nodes, className, durationSeconds, pathOrder, iconSize, }: RuntimeOrbitDiagramProps): import("react/jsx-runtime").JSX.Element;
+export default RuntimeOrbitDiagram;
+//# sourceMappingURL=RuntimeOrbitDiagram.d.ts.map

package/dist/components/RuntimeOrbitDiagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeOrbitDiagram.d.ts","sourceRoot":"","sources":["../../src/components/RuntimeOrbitDiagram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAItD,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAcD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,SAAc,EACd,eAAqB,EACrB,SAAS,EACT,QAAa,GACd,EAAE,wBAAwB,2CA4E1B;AAED,eAAe,mBAAmB,CAAC"}

package/dist/components/RuntimeOrbitDiagram.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import styles from "./RuntimeOrbitDiagram.module.css";
+function buildPath(points) {
+    if (points.length === 0) {
+        return "";
+    }
+    return `${points
+        .map((point, index) => `${index === 0 ? "M" : "L"} ${point.x.toFixed(2)} ${point.y.toFixed(2)}`)
+        .join(" ")} Z`;
+}
+export function RuntimeOrbitDiagram({ nodes, className = "", durationSeconds = 5.4, pathOrder, iconSize = 22, }) {
+    const orderedNodes = React.useMemo(() => {
+        if (!pathOrder?.length) {
+            return nodes;
+        }
+        const nodeMap = new Map(nodes.map((node) => [node.id, node]));
+        const sequence = pathOrder
+            .map((id) => nodeMap.get(id))
+            .filter((node) => Boolean(node));
+        return sequence.length === nodes.length ? sequence : nodes;
+    }, [nodes, pathOrder]);
+    const pathD = React.useMemo(() => buildPath(orderedNodes), [orderedNodes]);
+    const nodeSequenceIndex = React.useMemo(() => new Map(orderedNodes.map((node, index) => [node.id, index])), [orderedNodes]);
+    return (_jsxs("div", { className: `${styles.root} ${className}`.trim(), style: { "--orbit-duration": `${durationSeconds}s` }, children: [_jsxs("svg", { className: styles.svg, viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [pathD ? _jsx("path", { className: styles.track, d: pathD, pathLength: 100 }) : null, pathD ? _jsx("path", { className: styles.pathLine, d: pathD, pathLength: 100 }) : null, pathD ? (_jsx("circle", { className: styles.dot, cx: "0", cy: "0", r: "1.45", children: _jsx("animateMotion", { calcMode: "linear", dur: `${durationSeconds}s`, path: pathD, repeatCount: "indefinite" }) })) : null] }), nodes.map((node) => {
+                const IconComponent = node.icon;
+                const sequenceIndex = nodeSequenceIndex.get(node.id) ?? 0;
+                const nodeDelayMs = Math.round((durationSeconds * 1000 * sequenceIndex) /
+                    Math.max(orderedNodes.length, 1) -
+                    120);
+                return (_jsxs("div", { className: styles.node, style: {
+                        "--node-x": `${node.x}%`,
+                        "--node-y": `${node.y}%`,
+                        "--node-delay": `${nodeDelayMs}ms`,
+                    }, title: node.label, children: [_jsx("div", { className: styles.nodeInner, children: _jsx(IconComponent, { width: iconSize, height: iconSize }) }), _jsx("span", { className: styles.srOnly, children: node.label })] }, node.id));
+            })] }));
+}
+export default RuntimeOrbitDiagram;
+//# sourceMappingURL=RuntimeOrbitDiagram.js.map

package/dist/components/RuntimeOrbitDiagram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeOrbitDiagram.js","sourceRoot":"","sources":["../../src/components/RuntimeOrbitDiagram.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,MAAM,MAAM,kCAAkC,CAAC;AAkBtD,SAAS,SAAS,CAAC,MAA0B;IAC3C,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO,GAAG,MAAM;SACb,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACpB,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CACzE;SACA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,EAClC,KAAK,EACL,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,GAAG,EACrB,SAAS,EACT,QAAQ,GAAG,EAAE,GACY;IACzB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;YACvB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAU,CAAC,CAAC,CAAC;QACvE,MAAM,QAAQ,GAAG,SAAS;aACvB,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;aAC5B,MAAM,CAAC,CAAC,IAAI,EAA4B,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QAE7D,OAAO,QAAQ,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC7D,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAC3E,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CACrC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAU,CAAC,CAAC,EAC3E,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,OAAO,CACL,eACE,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,EAC/C,KAAK,EAAE,EAAE,kBAAkB,EAAE,GAAG,eAAe,GAAG,EAAyB,aAE3E,eACE,SAAS,EAAE,MAAM,CAAC,GAAG,EACrB,OAAO,EAAC,aAAa,EACrB,mBAAmB,EAAC,MAAM,iBACd,MAAM,aAEjB,KAAK,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,GAAI,CAAC,CAAC,CAAC,IAAI,EAC3E,KAAK,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,GAAI,CAAC,CAAC,CAAC,IAAI,EAC9E,KAAK,CAAC,CAAC,CAAC,CACP,iBAAQ,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,MAAM,YACnD,wBACE,QAAQ,EAAC,QAAQ,EACjB,GAAG,EAAE,GAAG,eAAe,GAAG,EAC1B,IAAI,EAAE,KAAK,EACX,WAAW,EAAC,YAAY,GACxB,GACK,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,EAEL,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAClB,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC;gBAChC,MAAM,aAAa,GAAG,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;gBAC1D,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAC5B,CAAC,eAAe,GAAG,IAAI,GAAG,aAAa,CAAC;oBACtC,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC;oBAChC,GAAG,CACN,CAAC;gBAEF,OAAO,CACL,eAEE,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,KAAK,EACH;wBACE,UAAU,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG;wBACxB,UAAU,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG;wBACxB,cAAc,EAAE,GAAG,WAAW,IAAI;qBACZ,EAE1B,KAAK,EAAE,IAAI,CAAC,KAAK,aAEjB,cAAK,SAAS,EAAE,MAAM,CAAC,SAAS,YAC9B,KAAC,aAAa,IAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,GAAI,GAChD,EACN,eAAM,SAAS,EAAE,MAAM,CAAC,MAAM,YAAG,IAAI,CAAC,KAAK,GAAQ,KAd9C,IAAI,CAAC,EAAE,CAeR,CACP,CAAC;YACJ,CAAC,CAAC,IACE,CACP,CAAC;AACJ,CAAC;AAED,eAAe,mBAAmB,CAAC","sourcesContent":["import React from \"react\";\n\nimport type { SteezIconProps } from \"@steez-ui/icons\";\n\nimport styles from \"./RuntimeOrbitDiagram.module.css\";\n\nexport interface RuntimeOrbitNode {\n  id: string;\n  label: string;\n  icon: React.ComponentType<SteezIconProps>;\n  x: number;\n  y: number;\n}\n\nexport interface RuntimeOrbitDiagramProps {\n  nodes: RuntimeOrbitNode[];\n  className?: string;\n  durationSeconds?: number;\n  pathOrder?: readonly string[];\n  iconSize?: number;\n}\n\nfunction buildPath(points: RuntimeOrbitNode[]) {\n  if (points.length === 0) {\n    return \"\";\n  }\n\n  return `${points\n    .map((point, index) =>\n      `${index === 0 ? \"M\" : \"L\"} ${point.x.toFixed(2)} ${point.y.toFixed(2)}`,\n    )\n    .join(\" \")} Z`;\n}\n\nexport function RuntimeOrbitDiagram({\n  nodes,\n  className = \"\",\n  durationSeconds = 5.4,\n  pathOrder,\n  iconSize = 22,\n}: RuntimeOrbitDiagramProps) {\n  const orderedNodes = React.useMemo(() => {\n    if (!pathOrder?.length) {\n      return nodes;\n    }\n\n    const nodeMap = new Map(nodes.map((node) => [node.id, node] as const));\n    const sequence = pathOrder\n      .map((id) => nodeMap.get(id))\n      .filter((node): node is RuntimeOrbitNode => Boolean(node));\n\n    return sequence.length === nodes.length ? sequence : nodes;\n  }, [nodes, pathOrder]);\n\n  const pathD = React.useMemo(() => buildPath(orderedNodes), [orderedNodes]);\n  const nodeSequenceIndex = React.useMemo(\n    () => new Map(orderedNodes.map((node, index) => [node.id, index] as const)),\n    [orderedNodes],\n  );\n\n  return (\n    <div\n      className={`${styles.root} ${className}`.trim()}\n      style={{ \"--orbit-duration\": `${durationSeconds}s` } as React.CSSProperties}\n    >\n      <svg\n        className={styles.svg}\n        viewBox=\"0 0 100 100\"\n        preserveAspectRatio=\"none\"\n        aria-hidden=\"true\"\n      >\n        {pathD ? <path className={styles.track} d={pathD} pathLength={100} /> : null}\n        {pathD ? <path className={styles.pathLine} d={pathD} pathLength={100} /> : null}\n        {pathD ? (\n          <circle className={styles.dot} cx=\"0\" cy=\"0\" r=\"1.45\">\n            <animateMotion\n              calcMode=\"linear\"\n              dur={`${durationSeconds}s`}\n              path={pathD}\n              repeatCount=\"indefinite\"\n            />\n          </circle>\n        ) : null}\n      </svg>\n\n      {nodes.map((node) => {\n        const IconComponent = node.icon;\n        const sequenceIndex = nodeSequenceIndex.get(node.id) ?? 0;\n        const nodeDelayMs = Math.round(\n          (durationSeconds * 1000 * sequenceIndex) /\n            Math.max(orderedNodes.length, 1) -\n            120,\n        );\n\n        return (\n          <div\n            key={node.id}\n            className={styles.node}\n            style={\n              {\n                \"--node-x\": `${node.x}%`,\n                \"--node-y\": `${node.y}%`,\n                \"--node-delay\": `${nodeDelayMs}ms`,\n              } as React.CSSProperties\n            }\n            title={node.label}\n          >\n            <div className={styles.nodeInner}>\n              <IconComponent width={iconSize} height={iconSize} />\n            </div>\n            <span className={styles.srOnly}>{node.label}</span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport default RuntimeOrbitDiagram;\n"]}

package/dist/components/RuntimeOrbitDiagram.module.css

@@ -0,0 +1,160 @@
+.root {
+  --orbit-duration: 5.4s;
+
+  position: relative;
+  width: min(100%, 38rem);
+  aspect-ratio: 1;
+  min-height: 22rem;
+  isolation: isolate;
+}
+
+.svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  overflow: visible;
+}
+
+.track {
+  fill: none;
+  stroke: color-mix(in srgb, var(--text-primary) 14%, transparent);
+  stroke-width: 0.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.pathLine {
+  fill: none;
+  stroke: color-mix(in srgb, var(--accent-primary) 88%, transparent);
+  stroke-width: 1.35;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 14 86;
+  animation: orbitPath var(--orbit-duration) linear infinite;
+}
+
+.node {
+  position: absolute;
+  top: var(--node-y);
+  left: var(--node-x);
+  width: clamp(4.15rem, 8vw, 4.95rem);
+  aspect-ratio: 1;
+  translate: -50% -50%;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  color: color-mix(in srgb, var(--text-secondary) 92%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
+  background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-primary) 28%, transparent);
+  animation: orbitPulse var(--orbit-duration) linear infinite;
+  animation-delay: var(--node-delay);
+  transition:
+    border-color var(--tile-hover-duration, 220ms) ease,
+    transform var(--tile-hover-duration, 220ms) ease,
+    background-color var(--tile-hover-duration, 220ms) ease;
+}
+
+.node:hover {
+  color: var(--text-primary);
+  border-color: color-mix(in srgb, var(--accent-primary) 46%, var(--border-color));
+  transform: translateY(-1px);
+}
+
+.nodeInner {
+  width: calc(100% - 10px);
+  height: calc(100% - 10px);
+  display: grid;
+  place-items: center;
+  border-radius: inherit;
+  background: color-mix(in srgb, var(--bg-primary) 96%, transparent);
+}
+
+.nodeInner svg {
+  width: 48%;
+  height: 48%;
+  color: currentColor;
+  opacity: 0.88;
+  transform: scale(0.86);
+  transition:
+    opacity var(--tile-hover-duration, 220ms) ease,
+    transform var(--tile-hover-duration, 220ms) ease,
+    color var(--tile-hover-duration, 220ms) ease;
+}
+
+.node:hover .nodeInner svg {
+  opacity: 1;
+  transform: scale(0.92);
+}
+
+.dot {
+  fill: var(--accent-primary);
+  filter: drop-shadow(
+    0 0 8px color-mix(in srgb, var(--accent-primary) 32%, transparent)
+  );
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes orbitPath {
+  from {
+    stroke-dashoffset: 0;
+  }
+
+  to {
+    stroke-dashoffset: -100;
+  }
+}
+
+@keyframes orbitPulse {
+  0%,
+  4%,
+  16%,
+  100% {
+    color: color-mix(in srgb, var(--text-secondary) 92%, transparent);
+    border-color: color-mix(in srgb, var(--border-color) 78%, transparent);
+    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-primary) 28%, transparent);
+  }
+
+  6%,
+  13% {
+    color: var(--text-primary);
+    border-color: color-mix(in srgb, var(--accent-primary) 64%, var(--border-color));
+    background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary));
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--accent-primary) 24%, transparent),
+      0 0 22px color-mix(in srgb, var(--accent-primary) 18%, transparent);
+  }
+}
+
+@media (max-width: 720px) {
+  .root {
+    min-height: 18rem;
+  }
+
+  .node {
+    width: clamp(3.55rem, 17vw, 4.25rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pathLine,
+  .node {
+    animation: none;
+  }
+
+  .dot {
+    display: none;
+  }
+}

package/dist/components/Section.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface SectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    title?: React.ReactNode;
+    titleClassName?: string;
+    contentClassName?: string;
+}
+export declare function Section({ title, children, className, titleClassName, contentClassName, ...props }: SectionProps): import("react/jsx-runtime").JSX.Element;
+export default Section;
+//# sourceMappingURL=Section.d.ts.map

package/dist/components/Section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/components/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,SAAc,EACd,cAAmB,EACnB,gBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,YAAY,2CAWd;AAED,eAAe,OAAO,CAAC"}

package/dist/components/Section.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./Section.module.css";
+export function Section({ title, children, className = "", titleClassName = "", contentClassName = "", ...props }) {
+    return (_jsxs("section", { className: `${styles.section} ${className}`.trim(), ...props, children: [title ? (_jsx("h3", { className: `${styles.title} ${titleClassName}`.trim(), children: title })) : null, _jsx("div", { className: `${styles.content} ${contentClassName}`.trim(), children: children })] }));
+}
+export default Section;
+//# sourceMappingURL=Section.js.map

package/dist/components/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../src/components/Section.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAS1C,MAAM,UAAU,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,cAAc,GAAG,EAAE,EACnB,gBAAgB,GAAG,EAAE,EACrB,GAAG,KAAK,EACK;IACb,OAAO,CACL,mBAAS,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,KAAM,KAAK,aACnE,KAAK,CAAC,CAAC,CAAC,CACP,aAAI,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,cAAc,EAAE,CAAC,IAAI,EAAE,YAAG,KAAK,GAAM,CACxE,CAAC,CAAC,CAAC,IAAI,EACR,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,gBAAgB,EAAE,CAAC,IAAI,EAAE,YAC3D,QAAQ,GACL,IACE,CACX,CAAC;AACJ,CAAC;AAED,eAAe,OAAO,CAAC","sourcesContent":["import React from \"react\";\n\nimport styles from \"./Section.module.css\";\n\nexport interface SectionProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  title?: React.ReactNode;\n  titleClassName?: string;\n  contentClassName?: string;\n}\n\nexport function Section({\n  title,\n  children,\n  className = \"\",\n  titleClassName = \"\",\n  contentClassName = \"\",\n  ...props\n}: SectionProps) {\n  return (\n    <section className={`${styles.section} ${className}`.trim()} {...props}>\n      {title ? (\n        <h3 className={`${styles.title} ${titleClassName}`.trim()}>{title}</h3>\n      ) : null}\n      <div className={`${styles.content} ${contentClassName}`.trim()}>\n        {children}\n      </div>\n    </section>\n  );\n}\n\nexport default Section;\n"]}

package/dist/components/Section.module.css

@@ -0,0 +1,20 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  margin: 0;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.content {
+  min-width: 0;
+}

package/dist/components/SectionHeader.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface SectionHeaderProps {
+    title: string;
+    description?: string;
+    actions?: React.ReactNode;
+    className?: string;
+}
+export declare function SectionHeader({ title, description, actions, className, }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default SectionHeader;
+//# sourceMappingURL=SectionHeader.d.ts.map

package/dist/components/SectionHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../src/components/SectionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAc,GACf,EAAE,kBAAkB,2CAcpB;AAED,eAAe,aAAa,CAAC"}

package/dist/components/SectionHeader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./SectionHeader.module.css";
+export function SectionHeader({ title, description, actions, className = "", }) {
+    return (_jsx("div", { className: `${styles.sectionHeader} ${className}`.trim(), children: _jsxs("div", { className: styles.headerContent, children: [_jsxs("div", { className: styles.textContent, children: [_jsx("h2", { className: styles.title, children: title }), description ? (_jsx("p", { className: styles.description, children: description })) : null] }), actions ? _jsx("div", { className: styles.actions, children: actions }) : null] }) }));
+}
+export default SectionHeader;
+//# sourceMappingURL=SectionHeader.js.map

package/dist/components/SectionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.js","sourceRoot":"","sources":["../../src/components/SectionHeader.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAShD,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,GAAG,EAAE,GACK;IACnB,OAAO,CACL,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,aAAa,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,YAC3D,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aAClC,eAAK,SAAS,EAAE,MAAM,CAAC,WAAW,aAChC,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAM,EACxC,WAAW,CAAC,CAAC,CAAC,CACb,YAAG,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,WAAW,GAAK,CACpD,CAAC,CAAC,CAAC,IAAI,IACJ,EACL,OAAO,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAAG,OAAO,GAAO,CAAC,CAAC,CAAC,IAAI,IAC7D,GACF,CACP,CAAC;AACJ,CAAC;AAED,eAAe,aAAa,CAAC","sourcesContent":["import React from \"react\";\n\nimport styles from \"./SectionHeader.module.css\";\n\nexport interface SectionHeaderProps {\n  title: string;\n  description?: string;\n  actions?: React.ReactNode;\n  className?: string;\n}\n\nexport function SectionHeader({\n  title,\n  description,\n  actions,\n  className = \"\",\n}: SectionHeaderProps) {\n  return (\n    <div className={`${styles.sectionHeader} ${className}`.trim()}>\n      <div className={styles.headerContent}>\n        <div className={styles.textContent}>\n          <h2 className={styles.title}>{title}</h2>\n          {description ? (\n            <p className={styles.description}>{description}</p>\n          ) : null}\n        </div>\n        {actions ? <div className={styles.actions}>{actions}</div> : null}\n      </div>\n    </div>\n  );\n}\n\nexport default SectionHeader;\n"]}

package/dist/components/SectionHeader.module.css

@@ -0,0 +1,54 @@
+.sectionHeader {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.headerContent {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.textContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  margin: 0 0 0.25rem;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.description {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+@media (max-width: 640px) {
+  .headerContent {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .actions {
+    justify-content: flex-end;
+  }
+}