@misoto22/folio 0.0.0 → 0.16.0

package/dist/website/Media/Media.js

@@ -0,0 +1,225 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { RiAddLine, RiSubtractLine } from "@remixicon/react";
+import { Badge } from "../../components/Badge/Badge.js";
+import { Button } from "../../components/Button/Button.js";
+import { DescriptionList } from "../../components/DescriptionList/DescriptionList.js";
+import { EmptyState } from "../../components/EmptyState/EmptyState.js";
+import { SkeletonBlock, SkeletonLine, SkeletonPage } from "../../components/Skeleton/Skeleton.js";
+import { cn } from "../../lib/cn.js";
+import { replaceSlotContent } from "../../lib/slot-content.js";
+function MediaMasthead({ eyebrow, title, description, headingLevel = 1, className, ...rest }) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs("header", { className: cn("folio-media-masthead", className), ...rest, children: [
+    eyebrow && /* @__PURE__ */ jsx("p", { className: "folio-media-eyebrow", children: eyebrow }),
+    /* @__PURE__ */ jsx(Heading, { className: "folio-media-masthead-title", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "folio-media-description", children: description })
+  ] });
+}
+function PhotographFeature({ image, title, eyebrow, description, caption, action, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("section", { className: cn("folio-photograph-feature", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "folio-photograph-feature-copy", children: [
+      eyebrow && /* @__PURE__ */ jsx("p", { className: "folio-media-eyebrow", children: eyebrow }),
+      /* @__PURE__ */ jsx("h2", { className: "folio-photograph-feature-title", children: title }),
+      description && /* @__PURE__ */ jsx("div", { className: "folio-media-description", children: description }),
+      action && /* @__PURE__ */ jsx("div", { className: "folio-photograph-feature-action", children: action })
+    ] }),
+    /* @__PURE__ */ jsxs("figure", { className: "folio-photograph-feature-figure", children: [
+      /* @__PURE__ */ jsx("div", { className: "folio-photograph-feature-image", children: image }),
+      caption && /* @__PURE__ */ jsx("figcaption", { className: "folio-photograph-feature-caption", children: caption })
+    ] })
+  ] });
+}
+function MediaCollection({ masthead, controls, collectionId, footer, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("folio-media-gallery-page", className), ...rest, children: [
+    masthead,
+    controls && /* @__PURE__ */ jsx("div", { className: "folio-media-container", children: controls }),
+    /* @__PURE__ */ jsx("section", { id: collectionId, className: "folio-media-gallery-content", children }),
+    footer
+  ] });
+}
+function MediaGallery({ children, emptyTitle, emptyAction, className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: "folio-media-container", children: emptyTitle ? /* @__PURE__ */ jsx(EmptyState, { title: emptyTitle, action: emptyAction }) : /* @__PURE__ */ jsx("ul", { role: "list", className: cn("folio-media-gallery", className), ...rest, children }) });
+}
+function MediaGalleryItem({ children, title, index, location, orientation, className, ...rest }) {
+  return /* @__PURE__ */ jsx("li", { className: cn("folio-media-gallery-item", className), ...rest, children: /* @__PURE__ */ jsxs("figure", { children: [
+    /* @__PURE__ */ jsx(Slot, { className: "folio-media-gallery-link", "data-photo-orientation": orientation, children }),
+    /* @__PURE__ */ jsxs("figcaption", { className: "folio-media-gallery-caption", children: [
+      index != null && /* @__PURE__ */ jsx("span", { className: "folio-media-gallery-index", "aria-hidden": "true", children: index }),
+      /* @__PURE__ */ jsx("span", { className: "folio-media-gallery-title", children: title }),
+      location && /* @__PURE__ */ jsx("span", { className: "folio-media-gallery-location", children: location })
+    ] })
+  ] }) });
+}
+function MediaGallerySkeleton({ label, count = 6 }) {
+  return /* @__PURE__ */ jsxs(SkeletonPage, { label, "aria-label": label, children: [
+    /* @__PURE__ */ jsxs("header", { className: "folio-media-masthead", children: [
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "w-24" }),
+      /* @__PURE__ */ jsx(SkeletonBlock, { className: "mt-4 h-9 w-[min(560px,90%)]" }),
+      /* @__PURE__ */ jsx(SkeletonBlock, { className: "mt-2.5 h-9 w-[min(380px,70%)]" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "folio-media-container", children: /* @__PURE__ */ jsx(SkeletonLine, { className: "h-11 w-full" }) }),
+    /* @__PURE__ */ jsx("section", { "data-loading-content": true, className: "folio-media-gallery-content", children: /* @__PURE__ */ jsx(MediaGallery, { children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx(SkeletonBlock, { className: "folio-media-gallery-mount" }),
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-3 w-3/4" })
+    ] }, index)) }) })
+  ] });
+}
+function MediaDetailLayout({ title, titleId, headingLevel = 1, category, notesLabel, orientation, backLink, index, media, light, actions, metadata, location, pager, related, className, ...rest }) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsx("div", { className: "folio-media-detail-page", children: /* @__PURE__ */ jsxs("article", { className: cn("folio-media-detail", className), "aria-labelledby": titleId, "data-photo-detail": true, ...rest, children: [
+    /* @__PURE__ */ jsxs("header", { className: "folio-media-index-bar", children: [
+      /* @__PURE__ */ jsx(Button, { asChild: true, variant: "ghost", children: backLink }),
+      index && /* @__PURE__ */ jsx("span", { className: "folio-media-index", children: index })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-media-spread", "data-photo-spread": orientation === "landscape" ? "wide" : "tall", children: [
+      /* @__PURE__ */ jsx("div", { className: "folio-media-well", "data-photo-media": true, children: media }),
+      /* @__PURE__ */ jsxs("aside", { className: "folio-media-ledger", "aria-label": notesLabel, "data-photo-ledger": true, children: [
+        /* @__PURE__ */ jsxs("div", { className: "folio-media-ledger-narrative", children: [
+          /* @__PURE__ */ jsxs("div", { className: "folio-media-ledger-lead", children: [
+            category && /* @__PURE__ */ jsx("p", { className: "folio-media-eyebrow", children: category }),
+            /* @__PURE__ */ jsx(Heading, { id: titleId, className: "folio-media-detail-title", children: title })
+          ] }),
+          light,
+          actions && /* @__PURE__ */ jsx("div", { className: "folio-media-actions", "data-photo-actions": true, children: actions })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "folio-media-ledger-data", children: [
+          metadata,
+          location
+        ] })
+      ] })
+    ] }),
+    pager,
+    related
+  ] }) });
+}
+function MediaMetadata({ items, className, ...rest }) {
+  return /* @__PURE__ */ jsx(DescriptionList, { items, className: cn("folio-media-metadata", className), "data-photo-specs": true, ...rest });
+}
+function MediaPager({ label, previous, next, className, ...rest }) {
+  if (!previous && !next) return null;
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, className: cn("folio-media-pager", className), "data-photo-pager": true, ...rest, children: [
+    previous || /* @__PURE__ */ jsx("span", {}),
+    next || /* @__PURE__ */ jsx("span", {})
+  ] });
+}
+function MediaPagerItem({ link, direction, label, title, image }) {
+  return /* @__PURE__ */ jsx(Slot, { className: "folio-media-pager-link", "data-direction": direction, children: replaceSlotContent(link, /* @__PURE__ */ jsxs(Fragment, { children: [
+    image && direction === "previous" && /* @__PURE__ */ jsx("span", { className: "folio-media-pager-image", children: image }),
+    /* @__PURE__ */ jsxs("span", { className: "folio-media-pager-copy", children: [
+      /* @__PURE__ */ jsx("span", { className: "folio-media-pager-label", children: label }),
+      " ",
+      /* @__PURE__ */ jsx("strong", { className: "folio-media-pager-title", children: title })
+    ] }),
+    image && direction === "next" && /* @__PURE__ */ jsx("span", { className: "folio-media-pager-image", children: image })
+  ] })) });
+}
+function MediaThumbnailStrip({ heading, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("section", { className: cn("folio-media-thumbnails", className), "data-photo-related": true, ...rest, children: [
+    /* @__PURE__ */ jsx("h2", { children: heading }),
+    /* @__PURE__ */ jsx("div", { className: "folio-media-thumbnail-list", children })
+  ] });
+}
+function MediaThumbnail({ children }) {
+  return /* @__PURE__ */ jsx(Slot, { className: "folio-media-thumbnail", children });
+}
+function MediaLightNote({ label, lines }) {
+  return /* @__PURE__ */ jsxs("div", { className: "folio-media-light", children: [
+    /* @__PURE__ */ jsx(Badge, { tone: "outline", children: label }),
+    lines.map((line) => /* @__PURE__ */ jsxs("div", { className: "folio-media-light-line", children: [
+      line.icon,
+      /* @__PURE__ */ jsx("span", { children: line.text }),
+      line.detail && /* @__PURE__ */ jsx("span", { className: "folio-media-light-detail", children: line.detail })
+    ] }, line.id))
+  ] });
+}
+function MediaMapSection({ title, hint, aliasId, map, preview, className, ...rest }) {
+  return /* @__PURE__ */ jsx("section", { className: cn("folio-media-map-section", className), ...rest, children: /* @__PURE__ */ jsxs("div", { className: "folio-media-container", children: [
+    aliasId && /* @__PURE__ */ jsx("span", { id: aliasId, className: "folio-media-anchor", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx("h2", { children: title }),
+      hint && /* @__PURE__ */ jsx("p", { children: hint })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-media-map-grid", children: [
+      map,
+      preview
+    ] })
+  ] }) });
+}
+function MediaMapFrame({ label, hint, navigation, compact = false, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("folio-media-map-frame", compact && "folio-media-map-frame-compact", className), ...rest, children: [
+    label && /* @__PURE__ */ jsx("span", { className: "folio-media-map-label", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-media-map-stage", children: [
+      children,
+      hint && /* @__PURE__ */ jsx("div", { className: "folio-media-map-hint", children: hint }),
+      navigation && /* @__PURE__ */ jsx("div", { className: "folio-media-map-navigation", children: navigation })
+    ] })
+  ] });
+}
+function MediaMapNavigation({ zoomInLabel, zoomOutLabel, onZoomIn, onZoomOut }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", iconOnly: true, "aria-label": zoomInLabel, onClick: onZoomIn, children: /* @__PURE__ */ jsx(RiAddLine, { size: 18, "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", iconOnly: true, "aria-label": zoomOutLabel, onClick: onZoomOut, children: /* @__PURE__ */ jsx(RiSubtractLine, { size: 18, "aria-hidden": "true" }) })
+  ] });
+}
+function MediaMapCanvas({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("folio-media-map-canvas", className), ...rest });
+}
+function MediaMapPreview({ title, image, action, place, coordinates, children }) {
+  return /* @__PURE__ */ jsxs("aside", { className: "folio-media-map-preview", children: [
+    /* @__PURE__ */ jsxs("div", { className: "folio-media-map-preview-image", children: [
+      image,
+      action && /* @__PURE__ */ jsx("div", { className: "folio-media-map-preview-action", children: action })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-media-map-preview-copy", children: [
+      /* @__PURE__ */ jsx("h3", { children: title }),
+      place && /* @__PURE__ */ jsx("p", { className: "folio-media-map-place", children: place }),
+      coordinates && /* @__PURE__ */ jsx("div", { className: "folio-media-map-coordinates", children: coordinates }),
+      children
+    ] })
+  ] });
+}
+function MediaMapAreaList({ items, value, onValueChange }) {
+  return /* @__PURE__ */ jsx("div", { className: "folio-media-map-areas", children: items.map((item) => /* @__PURE__ */ jsxs(Button, { variant: "ghost", "aria-pressed": value === item.id, onClick: () => onValueChange(item.id), className: "folio-media-map-area", children: [
+    /* @__PURE__ */ jsxs("span", { className: "folio-media-map-area-name", children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+      item.label
+    ] }),
+    " ",
+    /* @__PURE__ */ jsx("span", { className: "folio-media-map-area-count", children: item.count })
+  ] }, item.id)) });
+}
+function MediaMapMarker({ label, active = false, className, ...rest }) {
+  return /* @__PURE__ */ jsx(Button, { ...rest, variant: "ghost", iconOnly: true, "aria-label": label, "aria-pressed": active, className: cn("folio-media-map-marker", className), style: { width: 44, height: 44, ...rest.style }, children: /* @__PURE__ */ jsx(MediaMapPin, { active }) });
+}
+function MediaMapPin({ active = false }) {
+  return /* @__PURE__ */ jsx("span", { className: "folio-media-map-pin", "data-active": active || void 0, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", {}) });
+}
+function MediaMapSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "folio-media-map-skeleton folio-media-container", "aria-hidden": "true", children: /* @__PURE__ */ jsx(SkeletonBlock, { className: "folio-media-map-canvas" }) });
+}
+export {
+  MediaCollection,
+  MediaDetailLayout,
+  MediaGallery,
+  MediaGalleryItem,
+  MediaGallerySkeleton,
+  MediaLightNote,
+  MediaMapAreaList,
+  MediaMapCanvas,
+  MediaMapFrame,
+  MediaMapMarker,
+  MediaMapNavigation,
+  MediaMapPin,
+  MediaMapPreview,
+  MediaMapSection,
+  MediaMapSkeleton,
+  MediaMasthead,
+  MediaMetadata,
+  MediaPager,
+  MediaPagerItem,
+  MediaThumbnail,
+  MediaThumbnailStrip,
+  PhotographFeature
+};
+//# sourceMappingURL=Media.js.map

package/dist/website/Media/Media.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Media/Media.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport { RiAddLine, RiSubtractLine } from '@remixicon/react'\nimport type { ComponentPropsWithRef, HTMLAttributes, ReactElement, ReactNode } from 'react'\nimport { Badge } from '../../components/Badge/Badge'\nimport { Button, type ButtonProps } from '../../components/Button/Button'\nimport { DescriptionList, type DescriptionListItem } from '../../components/DescriptionList/DescriptionList'\nimport { EmptyState } from '../../components/EmptyState/EmptyState'\nimport { SkeletonBlock, SkeletonLine, SkeletonPage } from '../../components/Skeleton/Skeleton'\nimport { cn } from '../../lib/cn'\nimport { replaceSlotContent } from '../../lib/slot-content'\n\nexport interface MediaMastheadProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  eyebrow?: ReactNode\n  title: ReactNode\n  description?: ReactNode\n  /** The title level when this page composition sits inside another document. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n}\n\n/** The quiet opening to an image collection, before its controls and prints. */\nexport function MediaMasthead({ eyebrow, title, description, headingLevel = 1, className, ...rest }: MediaMastheadProps) {\n  const Heading = `h${headingLevel}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n  return (\n    <header className={cn('folio-media-masthead', className)} {...rest}>\n      {eyebrow && <p className=\"folio-media-eyebrow\">{eyebrow}</p>}\n      <Heading className=\"folio-media-masthead-title\">{title}</Heading>\n      {description && <p className=\"folio-media-description\">{description}</p>}\n    </header>\n  )\n}\n\nexport interface PhotographFeatureProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  image: ReactNode\n  title: ReactNode\n  eyebrow?: ReactNode\n  description?: ReactNode\n  caption?: ReactNode\n  action?: ReactNode\n}\n\n/** A photograph and an editorial introduction, with the original image ratio. */\nexport function PhotographFeature({ image, title, eyebrow, description, caption, action, className, ...rest }: PhotographFeatureProps) {\n  return (\n    <section className={cn('folio-photograph-feature', className)} {...rest}>\n      <div className=\"folio-photograph-feature-copy\">\n        {eyebrow && <p className=\"folio-media-eyebrow\">{eyebrow}</p>}\n        <h2 className=\"folio-photograph-feature-title\">{title}</h2>\n        {description && <div className=\"folio-media-description\">{description}</div>}\n        {action && <div className=\"folio-photograph-feature-action\">{action}</div>}\n      </div>\n      <figure className=\"folio-photograph-feature-figure\">\n        <div className=\"folio-photograph-feature-image\">{image}</div>\n        {caption && <figcaption className=\"folio-photograph-feature-caption\">{caption}</figcaption>}\n      </figure>\n    </section>\n  )\n}\n\nexport interface MediaCollectionProps extends HTMLAttributes<HTMLDivElement> {\n  masthead: ReactNode\n  controls?: ReactNode\n  collectionId?: string\n  footer?: ReactNode\n}\n\n/** Page-level gallery composition; the host owns its filters and collection. */\nexport function MediaCollection({ masthead, controls, collectionId, footer, children, className, ...rest }: MediaCollectionProps) {\n  return (\n    <div className={cn('folio-media-gallery-page', className)} {...rest}>\n      {masthead}\n      {controls && <div className=\"folio-media-container\">{controls}</div>}\n      <section id={collectionId} className=\"folio-media-gallery-content\">{children}</section>\n      {footer}\n    </div>\n  )\n}\n\nexport interface MediaGalleryProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode\n  /** Supply localized empty copy when the collection may have no children. */\n  emptyTitle?: ReactNode\n  emptyAction?: ReactNode\n}\n\n/** Level mounts keep unlike aspect ratios aligned without cropping the prints. */\nexport function MediaGallery({ children, emptyTitle, emptyAction, className, ...rest }: MediaGalleryProps) {\n  return (\n    <div className=\"folio-media-container\">\n      {emptyTitle ? <EmptyState title={emptyTitle} action={emptyAction} /> : (\n        <ul role=\"list\" className={cn('folio-media-gallery', className)} {...rest}>{children}</ul>\n      )}\n    </div>\n  )\n}\n\nexport interface MediaGalleryItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title'> {\n  /** A host link containing its image. The package supplies the print layout. */\n  children: ReactElement\n  title: ReactNode\n  index?: ReactNode\n  location?: ReactNode\n  orientation?: 'portrait' | 'landscape' | 'square'\n}\n\nexport function MediaGalleryItem({ children, title, index, location, orientation, className, ...rest }: MediaGalleryItemProps) {\n  return (\n    <li className={cn('folio-media-gallery-item', className)} {...rest}>\n      <figure>\n        <Slot className=\"folio-media-gallery-link\" data-photo-orientation={orientation}>{children}</Slot>\n        <figcaption className=\"folio-media-gallery-caption\">\n          {index != null && <span className=\"folio-media-gallery-index\" aria-hidden=\"true\">{index}</span>}\n          <span className=\"folio-media-gallery-title\">{title}</span>\n          {location && <span className=\"folio-media-gallery-location\">{location}</span>}\n        </figcaption>\n      </figure>\n    </li>\n  )\n}\n\nexport interface MediaGallerySkeletonProps {\n  label: string\n  count?: number\n}\n\nexport function MediaGallerySkeleton({ label, count = 6 }: MediaGallerySkeletonProps) {\n  return (\n    <SkeletonPage label={label} aria-label={label}>\n      <header className=\"folio-media-masthead\">\n        <SkeletonLine className=\"w-24\" />\n        <SkeletonBlock className=\"mt-4 h-9 w-[min(560px,90%)]\" />\n        <SkeletonBlock className=\"mt-2.5 h-9 w-[min(380px,70%)]\" />\n      </header>\n      <div className=\"folio-media-container\"><SkeletonLine className=\"h-11 w-full\" /></div>\n      <section data-loading-content className=\"folio-media-gallery-content\">\n        <MediaGallery>\n          {Array.from({ length: count }, (_, index) => (\n            <li key={index}>\n              <SkeletonBlock className=\"folio-media-gallery-mount\" />\n              <SkeletonLine className=\"mt-3 w-3/4\" />\n            </li>\n          ))}\n        </MediaGallery>\n      </section>\n    </SkeletonPage>\n  )\n}\n\nexport interface MediaDetailLayoutProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  title: ReactNode\n  titleId: string\n  /** The title level when this page composition sits inside another document. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  category?: ReactNode\n  notesLabel: string\n  orientation: 'portrait' | 'landscape' | 'square'\n  backLink: ReactElement\n  index?: ReactNode\n  media: ReactNode\n  light?: ReactNode\n  actions?: ReactNode\n  metadata?: ReactNode\n  location?: ReactNode\n  pager?: ReactNode\n  related?: ReactNode\n}\n\n/** Portraits share a spread with their notes; landscapes lead a full-width spread. */\nexport function MediaDetailLayout({ title, titleId, headingLevel = 1, category, notesLabel, orientation, backLink, index, media, light, actions, metadata, location, pager, related, className, ...rest }: MediaDetailLayoutProps) {\n  const Heading = `h${headingLevel}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n  return (\n    <div className=\"folio-media-detail-page\">\n      <article className={cn('folio-media-detail', className)} aria-labelledby={titleId} data-photo-detail {...rest}>\n        <header className=\"folio-media-index-bar\">\n          <Button asChild variant=\"ghost\">{backLink}</Button>\n          {index && <span className=\"folio-media-index\">{index}</span>}\n        </header>\n        <div className=\"folio-media-spread\" data-photo-spread={orientation === 'landscape' ? 'wide' : 'tall'}>\n          <div className=\"folio-media-well\" data-photo-media>{media}</div>\n          <aside className=\"folio-media-ledger\" aria-label={notesLabel} data-photo-ledger>\n            <div className=\"folio-media-ledger-narrative\">\n              <div className=\"folio-media-ledger-lead\">\n                {category && <p className=\"folio-media-eyebrow\">{category}</p>}\n                <Heading id={titleId} className=\"folio-media-detail-title\">{title}</Heading>\n              </div>\n              {light}\n              {actions && <div className=\"folio-media-actions\" data-photo-actions>{actions}</div>}\n            </div>\n            <div className=\"folio-media-ledger-data\">{metadata}{location}</div>\n          </aside>\n        </div>\n        {pager}\n        {related}\n      </article>\n    </div>\n  )\n}\n\nexport interface MediaMetadataProps extends HTMLAttributes<HTMLDListElement> {\n  items: DescriptionListItem[]\n}\n\nexport function MediaMetadata({ items, className, ...rest }: MediaMetadataProps) {\n  return <DescriptionList items={items} className={cn('folio-media-metadata', className)} data-photo-specs {...rest} />\n}\n\nexport interface MediaPagerProps extends HTMLAttributes<HTMLElement> {\n  label: string\n  previous?: ReactNode\n  next?: ReactNode\n}\n\nexport function MediaPager({ label, previous, next, className, ...rest }: MediaPagerProps) {\n  if (!previous && !next) return null\n  return <nav aria-label={label} className={cn('folio-media-pager', className)} data-photo-pager {...rest}>{previous || <span />}{next || <span />}</nav>\n}\n\nexport interface MediaPagerItemProps {\n  link: ReactElement\n  direction: 'previous' | 'next'\n  label: ReactNode\n  title: ReactNode\n  image?: ReactNode\n}\n\nexport function MediaPagerItem({ link, direction, label, title, image }: MediaPagerItemProps) {\n  return (\n    <Slot className=\"folio-media-pager-link\" data-direction={direction}>\n      {/** Slot composes the host link while retaining its routing behavior. */}\n      {replaceSlotContent(link, <>\n        {image && direction === 'previous' && <span className=\"folio-media-pager-image\">{image}</span>}\n        <span className=\"folio-media-pager-copy\">\n          <span className=\"folio-media-pager-label\">{label}</span>{' '}\n          <strong className=\"folio-media-pager-title\">{title}</strong>\n        </span>\n        {image && direction === 'next' && <span className=\"folio-media-pager-image\">{image}</span>}\n      </>)}\n    </Slot>\n  )\n}\n\nexport interface MediaThumbnailStripProps extends HTMLAttributes<HTMLElement> {\n  heading: ReactNode\n}\n\nexport function MediaThumbnailStrip({ heading, children, className, ...rest }: MediaThumbnailStripProps) {\n  return <section className={cn('folio-media-thumbnails', className)} data-photo-related {...rest}><h2>{heading}</h2><div className=\"folio-media-thumbnail-list\">{children}</div></section>\n}\n\nexport interface MediaThumbnailProps {\n  children: ReactElement\n}\n\nexport function MediaThumbnail({ children }: MediaThumbnailProps) {\n  return <Slot className=\"folio-media-thumbnail\">{children}</Slot>\n}\n\nexport interface MediaLightNoteLine {\n  id: string\n  icon?: ReactNode\n  text: ReactNode\n  detail?: ReactNode\n}\n\nexport interface MediaLightNoteProps {\n  label: ReactNode\n  lines: MediaLightNoteLine[]\n}\n\n/** The host supplies observations and formatted labels; this is presentation only. */\nexport function MediaLightNote({ label, lines }: MediaLightNoteProps) {\n  return <div className=\"folio-media-light\"><Badge tone=\"outline\">{label}</Badge>{lines.map((line) => <div className=\"folio-media-light-line\" key={line.id}>{line.icon}<span>{line.text}</span>{line.detail && <span className=\"folio-media-light-detail\">{line.detail}</span>}</div>)}</div>\n}\n\nexport interface MediaMapSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  title: ReactNode\n  hint?: ReactNode\n  /** An optional legacy anchor, owned and named by the host. */\n  aliasId?: string\n  map: ReactNode\n  preview: ReactNode\n}\n\nexport function MediaMapSection({ title, hint, aliasId, map, preview, className, ...rest }: MediaMapSectionProps) {\n  return <section className={cn('folio-media-map-section', className)} {...rest}><div className=\"folio-media-container\">{aliasId && <span id={aliasId} className=\"folio-media-anchor\" aria-hidden=\"true\" />}<header><h2>{title}</h2>{hint && <p>{hint}</p>}</header><div className=\"folio-media-map-grid\">{map}{preview}</div></div></section>\n}\n\nexport interface MediaMapFrameProps extends HTMLAttributes<HTMLDivElement> {\n  label?: ReactNode\n  hint?: ReactNode\n  navigation?: ReactNode\n  compact?: boolean\n}\n\nexport function MediaMapFrame({ label, hint, navigation, compact = false, children, className, ...rest }: MediaMapFrameProps) {\n  return <div className={cn('folio-media-map-frame', compact && 'folio-media-map-frame-compact', className)} {...rest}>{label && <span className=\"folio-media-map-label\">{label}</span>}<div className=\"folio-media-map-stage\">{children}{hint && <div className=\"folio-media-map-hint\">{hint}</div>}{navigation && <div className=\"folio-media-map-navigation\">{navigation}</div>}</div></div>\n}\n\nexport interface MediaMapNavigationProps {\n  zoomInLabel: string\n  zoomOutLabel: string\n  onZoomIn: () => void\n  onZoomOut: () => void\n}\n\nexport function MediaMapNavigation({ zoomInLabel, zoomOutLabel, onZoomIn, onZoomOut }: MediaMapNavigationProps) {\n  return <><Button variant=\"secondary\" iconOnly aria-label={zoomInLabel} onClick={onZoomIn}><RiAddLine size={18} aria-hidden=\"true\" /></Button><Button variant=\"secondary\" iconOnly aria-label={zoomOutLabel} onClick={onZoomOut}><RiSubtractLine size={18} aria-hidden=\"true\" /></Button></>\n}\n\nexport type MediaMapCanvasProps = ComponentPropsWithRef<'div'>\n\n/** A sized provider container. Map creation, themes and geographic math stay in the host. */\nexport function MediaMapCanvas({ className, ...rest }: MediaMapCanvasProps) {\n  return <div className={cn('folio-media-map-canvas', className)} {...rest} />\n}\n\nexport interface MediaMapPreviewProps {\n  title: ReactNode\n  image?: ReactNode\n  action?: ReactNode\n  place?: ReactNode\n  coordinates?: ReactNode\n  children?: ReactNode\n}\n\nexport function MediaMapPreview({ title, image, action, place, coordinates, children }: MediaMapPreviewProps) {\n  return <aside className=\"folio-media-map-preview\"><div className=\"folio-media-map-preview-image\">{image}{action && <div className=\"folio-media-map-preview-action\">{action}</div>}</div><div className=\"folio-media-map-preview-copy\"><h3>{title}</h3>{place && <p className=\"folio-media-map-place\">{place}</p>}{coordinates && <div className=\"folio-media-map-coordinates\">{coordinates}</div>}{children}</div></aside>\n}\n\nexport interface MediaMapArea {\n  id: string\n  label: ReactNode\n  count: ReactNode\n}\n\nexport interface MediaMapAreaListProps {\n  items: MediaMapArea[]\n  value?: string\n  onValueChange: (value: string) => void\n}\n\nexport function MediaMapAreaList({ items, value, onValueChange }: MediaMapAreaListProps) {\n  return (\n    <div className=\"folio-media-map-areas\">\n      {items.map((item) => (\n        <Button key={item.id} variant=\"ghost\" aria-pressed={value === item.id} onClick={() => onValueChange(item.id)} className=\"folio-media-map-area\">\n          <span className=\"folio-media-map-area-name\"><span aria-hidden=\"true\" />{item.label}</span>{' '}\n          <span className=\"folio-media-map-area-count\">{item.count}</span>\n        </Button>\n      ))}\n    </div>\n  )\n}\n\nexport interface MediaMapMarkerProps extends Omit<Extract<ButtonProps, { href?: undefined }>, 'children' | 'iconOnly'> {\n  label: string\n  active?: boolean\n}\n\n/** A keyboard-operable 44px marker for a host's map-provider portal. */\nexport function MediaMapMarker({ label, active = false, className, ...rest }: MediaMapMarkerProps) {\n  return <Button {...rest} variant=\"ghost\" iconOnly aria-label={label} aria-pressed={active} className={cn('folio-media-map-marker', className)} style={{ width: 44, height: 44, ...rest.style }}><MediaMapPin active={active} /></Button>\n}\n\nexport interface MediaMapPinProps {\n  active?: boolean\n}\n\nexport function MediaMapPin({ active = false }: MediaMapPinProps) {\n  return <span className=\"folio-media-map-pin\" data-active={active || undefined} aria-hidden=\"true\"><span /></span>\n}\n\nexport function MediaMapSkeleton() {\n  return <div className=\"folio-media-map-skeleton folio-media-container\" aria-hidden=\"true\"><SkeletonBlock className=\"folio-media-map-canvas\" /></div>\n}\n"],"mappings":"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","names":[]}

package/dist/website/Media/MediaLightbox.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface MediaLightboxProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    triggerLabel: string;
+    closeLabel: string;
+    /** Intrinsic width divided by height; invalid dimensions use a safe fallback. */
+    aspectRatio: number;
+    media: ReactNode;
+    expandedMedia?: ReactNode;
+}
+/** A print and its controlled, focus-trapped full-screen dialog. */
+declare function MediaLightbox({ open, onOpenChange, title, triggerLabel, closeLabel, aspectRatio, media, expandedMedia }: MediaLightboxProps): react.JSX.Element;
+
+export { MediaLightbox, type MediaLightboxProps };

package/dist/website/Media/MediaLightbox.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RiCloseLine } from "@remixicon/react";
+import { Button } from "../../components/Button/Button.js";
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from "../../components/Dialog/Dialog.js";
+function MediaLightbox({ open, onOpenChange, title, triggerLabel, closeLabel, aspectRatio, media, expandedMedia = media }) {
+  const ratio = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 1.5;
+  const style = { "--folio-media-aspect": ratio };
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", "aria-label": triggerLabel, className: "folio-media-frame", style, "data-photo-frame": true, children: media }) }),
+    /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        title,
+        hideTitle: true,
+        showClose: false,
+        "aria-modal": "true",
+        "aria-describedby": void 0,
+        "data-photo-lightbox": true,
+        "data-mode": "dark",
+        className: "folio-media-lightbox translate-x-0 translate-y-0",
+        style,
+        onClick: (event) => {
+          if (event.target === event.currentTarget) onOpenChange(false);
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "folio-media-lightbox-stage", children: expandedMedia }),
+          /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", iconOnly: true, "aria-label": closeLabel, className: "folio-media-lightbox-close", children: /* @__PURE__ */ jsx(RiCloseLine, { size: 18, "aria-hidden": "true" }) }) }),
+          /* @__PURE__ */ jsx("p", { className: "folio-media-lightbox-caption", "aria-hidden": "true", children: title })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  MediaLightbox
+};
+//# sourceMappingURL=MediaLightbox.js.map

package/dist/website/Media/MediaLightbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Media/MediaLightbox.tsx"],"sourcesContent":["'use client'\n\nimport type { CSSProperties, ReactNode } from 'react'\nimport { RiCloseLine } from '@remixicon/react'\nimport { Button } from '../../components/Button/Button'\nimport { Dialog, DialogClose, DialogContent, DialogTrigger } from '../../components/Dialog/Dialog'\n\nexport interface MediaLightboxProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  title: string\n  triggerLabel: string\n  closeLabel: string\n  /** Intrinsic width divided by height; invalid dimensions use a safe fallback. */\n  aspectRatio: number\n  media: ReactNode\n  expandedMedia?: ReactNode\n}\n\n/** A print and its controlled, focus-trapped full-screen dialog. */\nexport function MediaLightbox({ open, onOpenChange, title, triggerLabel, closeLabel, aspectRatio, media, expandedMedia = media }: MediaLightboxProps) {\n  const ratio = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 1.5\n  const style = { '--folio-media-aspect': ratio } as CSSProperties\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogTrigger asChild>\n        <Button variant=\"ghost\" aria-label={triggerLabel} className=\"folio-media-frame\" style={style} data-photo-frame>\n          {media}\n        </Button>\n      </DialogTrigger>\n      <DialogContent\n        title={title}\n        hideTitle\n        showClose={false}\n        aria-modal=\"true\"\n        aria-describedby={undefined}\n        data-photo-lightbox\n        data-mode=\"dark\"\n        className=\"folio-media-lightbox translate-x-0 translate-y-0\"\n        style={style}\n        onClick={(event) => { if (event.target === event.currentTarget) onOpenChange(false) }}\n      >\n        <div className=\"folio-media-lightbox-stage\">{expandedMedia}</div>\n        <DialogClose asChild><Button variant=\"secondary\" iconOnly aria-label={closeLabel} className=\"folio-media-lightbox-close\"><RiCloseLine size={18} aria-hidden=\"true\" /></Button></DialogClose>\n        <p className=\"folio-media-lightbox-caption\" aria-hidden=\"true\">{title}</p>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":";AA2BQ,cAIF,YAJE;AAxBR,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,QAAQ,aAAa,eAAe,qBAAqB;AAe3D,SAAS,cAAc,EAAE,MAAM,cAAc,OAAO,cAAc,YAAY,aAAa,OAAO,gBAAgB,MAAM,GAAuB;AACpJ,QAAM,QAAQ,OAAO,SAAS,WAAW,KAAK,cAAc,IAAI,cAAc;AAC9E,QAAM,QAAQ,EAAE,wBAAwB,MAAM;AAE9C,SACE,qBAAC,UAAO,MAAY,cAClB;AAAA,wBAAC,iBAAc,SAAO,MACpB,8BAAC,UAAO,SAAQ,SAAQ,cAAY,cAAc,WAAU,qBAAoB,OAAc,oBAAgB,MAC3G,iBACH,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAS;AAAA,QACT,WAAW;AAAA,QACX,cAAW;AAAA,QACX,oBAAkB;AAAA,QAClB,uBAAmB;AAAA,QACnB,aAAU;AAAA,QACV,WAAU;AAAA,QACV;AAAA,QACA,SAAS,CAAC,UAAU;AAAE,cAAI,MAAM,WAAW,MAAM,cAAe,cAAa,KAAK;AAAA,QAAE;AAAA,QAEpF;AAAA,8BAAC,SAAI,WAAU,8BAA8B,yBAAc;AAAA,UAC3D,oBAAC,eAAY,SAAO,MAAC,8BAAC,UAAO,SAAQ,aAAY,UAAQ,MAAC,cAAY,YAAY,WAAU,8BAA6B,8BAAC,eAAY,MAAM,IAAI,eAAY,QAAO,GAAE,GAAS;AAAA,UAC9K,oBAAC,OAAE,WAAU,gCAA+B,eAAY,QAAQ,iBAAM;AAAA;AAAA;AAAA,IACxE;AAAA,KACF;AAEJ;","names":[]}

package/dist/website/Metrics/Metrics.d.ts

@@ -0,0 +1,74 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+
+interface MetricsRangeProps {
+    label: string;
+    value: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    onChange: (value: string) => void;
+}
+/** A controlled range selector. Selection represents the data the host successfully loaded. */
+declare function MetricsRange({ label, value, options, onChange }: MetricsRangeProps): react.JSX.Element;
+interface MetricsSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title?: ReactNode;
+    caption?: ReactNode;
+    action?: ReactNode;
+    children: ReactNode;
+}
+/** A dashboard section without a dependency on a chart engine or a domain response. */
+declare function MetricsSection({ title, caption, action, children, className, ...rest }: MetricsSectionProps): react.JSX.Element;
+interface MetricsPanelProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title: string;
+    caption?: string;
+    children: ReactNode;
+}
+/** A labeled panel. Children may use the separately imported charts entry. */
+declare function MetricsPanel({ title, caption, children, className, ...rest }: MetricsPanelProps): react.JSX.Element;
+interface MetricsPanelGridProps extends HTMLAttributes<HTMLDivElement> {
+    columns?: 2 | 4;
+}
+/** Responsive grids share their dividers and minimum panel width. */
+declare function MetricsPanelGrid({ columns, className, ...props }: MetricsPanelGridProps): react.JSX.Element;
+interface MetricsListProps {
+    label: string;
+    items: {
+        id: string;
+        label: ReactNode;
+        value: ReactNode;
+        icon?: ReactNode;
+    }[];
+    empty: string;
+}
+interface MetricsEmptyStateProps {
+    title: ReactNode;
+    description: ReactNode;
+}
+/** An empty time series retains its plot space and tells the reader what will appear once the first observation arrives. */
+declare function MetricsEmptyState({ title, description }: MetricsEmptyStateProps): react.JSX.Element;
+/** Already-formatted metric rows, with a named value relation and an explicit empty state. */
+declare function MetricsList({ label, items, empty }: MetricsListProps): react.JSX.Element;
+interface MetricValueProps {
+    segments: {
+        text: string;
+        unit?: boolean;
+    }[];
+}
+/** A supplied number with its units on the supporting type step. */
+declare function MetricValue({ segments }: MetricValueProps): react.JSX.Element;
+interface MetricDeltaProps {
+    direction: 'up' | 'down' | 'steady';
+    children: ReactNode;
+}
+/** Neutral direction marks never assume an increase is good or a decrease is an error. */
+declare function MetricDelta({ direction, children }: MetricDeltaProps): react.JSX.Element;
+interface LiveCountProps {
+    value: number | null;
+    label: string;
+}
+/** Unknown live counts remain absent; a measured zero is a real reading. */
+declare function LiveCount({ value, label }: LiveCountProps): react.JSX.Element | null;
+
+export { LiveCount, type LiveCountProps, MetricDelta, type MetricDeltaProps, MetricValue, type MetricValueProps, MetricsEmptyState, type MetricsEmptyStateProps, MetricsList, type MetricsListProps, MetricsPanel, MetricsPanelGrid, type MetricsPanelGridProps, type MetricsPanelProps, MetricsRange, type MetricsRangeProps, MetricsSection, type MetricsSectionProps };

package/dist/website/Metrics/Metrics.js

@@ -0,0 +1,96 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../../components/Badge/Badge.js";
+import { Heading } from "../../components/Heading/Heading.js";
+import { StatusDot } from "../../components/StatusDot/StatusDot.js";
+import { Text } from "../../components/Text/Text.js";
+import { ToggleGroup, ToggleGroupItem } from "../../components/ToggleGroup/ToggleGroup.js";
+import { cn } from "../../lib/cn.js";
+function MetricsRange({ label, value, options, onChange }) {
+  return /* @__PURE__ */ jsxs("div", { className: "folio-metrics-range", children: [
+    /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: "muted", children: label }),
+    /* @__PURE__ */ jsx(ToggleGroup, { type: "single", "aria-label": label, value, onValueChange: (next) => {
+      if (next) onChange(next);
+    }, className: "max-w-full flex-wrap", children: options.map((option) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: option.value, className: "min-h-11", children: option.label }, option.value)) })
+  ] });
+}
+function MetricsSection({ title, caption, action, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("section", { className: cn("folio-metrics-section", className), ...rest, children: [
+    title && /* @__PURE__ */ jsxs("header", { className: "folio-metrics-section__header", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Heading, { level: 2, children: title }),
+        caption && /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", className: "mb-0 mt-2", children: caption })
+      ] }),
+      action
+    ] }),
+    children
+  ] });
+}
+function MetricsPanel({ title, caption, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("section", { className: cn("folio-metrics-panel", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: "sub", children: title }),
+      caption && /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", className: "mb-0 mt-2", children: caption })
+    ] }),
+    children
+  ] });
+}
+function MetricsPanelGrid({ columns = 2, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("folio-metrics-grid", className), "data-columns": columns, ...props });
+}
+function MetricsEmptyState({ title, description }) {
+  return /* @__PURE__ */ jsxs("div", { className: "folio-metrics-empty", role: "status", children: [
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "folio-metrics-empty__plot", children: [
+      /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx("span", {})
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: "sub", children: title }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", tone: "muted", className: "mb-0 mt-2", children: description })
+    ] })
+  ] });
+}
+function MetricsList({ label, items, empty }) {
+  if (items.length === 0) return /* @__PURE__ */ jsx(Text, { size: "sm", tone: "muted", children: empty });
+  return /* @__PURE__ */ jsx("dl", { "aria-label": label, className: "folio-metrics-list", children: items.map((item) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("dt", { children: [
+      item.icon,
+      /* @__PURE__ */ jsx(Text, { as: "span", size: "sm", tone: "strong", children: item.label })
+    ] }),
+    /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: "muted", children: item.value }) })
+  ] }, item.id)) });
+}
+function MetricValue({ segments }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: segments.map((segment, index) => /* @__PURE__ */ jsx("span", { className: segment.unit ? "folio-metric-unit" : void 0, children: segment.text }, index)) });
+}
+function MetricDelta({ direction, children }) {
+  return /* @__PURE__ */ jsxs(Text, { as: "span", size: "xs", tone: "muted", className: "inline-flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: direction === "up" ? "\u25B2" : direction === "down" ? "\u25BC" : "\u2014" }),
+    children
+  ] });
+}
+function LiveCount({ value, label }) {
+  if (value === null) return null;
+  return /* @__PURE__ */ jsxs(Badge, { tone: "outline", children: [
+    /* @__PURE__ */ jsx(StatusDot, { tone: "neutral" }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      value,
+      " ",
+      label
+    ] })
+  ] });
+}
+export {
+  LiveCount,
+  MetricDelta,
+  MetricValue,
+  MetricsEmptyState,
+  MetricsList,
+  MetricsPanel,
+  MetricsPanelGrid,
+  MetricsRange,
+  MetricsSection
+};
+//# sourceMappingURL=Metrics.js.map

package/dist/website/Metrics/Metrics.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Metrics/Metrics.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { Badge } from '../../components/Badge/Badge'\nimport { Heading } from '../../components/Heading/Heading'\nimport { StatusDot } from '../../components/StatusDot/StatusDot'\nimport { Text } from '../../components/Text/Text'\nimport { ToggleGroup, ToggleGroupItem } from '../../components/ToggleGroup/ToggleGroup'\nimport { cn } from '../../lib/cn'\n\nexport interface MetricsRangeProps {\n  label: string\n  value: string\n  options: { value: string; label: string }[]\n  onChange: (value: string) => void\n}\n\n/** A controlled range selector. Selection represents the data the host successfully loaded. */\nexport function MetricsRange({ label, value, options, onChange }: MetricsRangeProps) {\n  return <div className=\"folio-metrics-range\"><Text as=\"span\" size=\"xs\" tone=\"muted\">{label}</Text><ToggleGroup type=\"single\" aria-label={label} value={value} onValueChange={(next) => { if (next) onChange(next) }} className=\"max-w-full flex-wrap\">{options.map((option) => <ToggleGroupItem value={option.value} key={option.value} className=\"min-h-11\">{option.label}</ToggleGroupItem>)}</ToggleGroup></div>\n}\n\nexport interface MetricsSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  title?: ReactNode\n  caption?: ReactNode\n  action?: ReactNode\n  children: ReactNode\n}\n\n/** A dashboard section without a dependency on a chart engine or a domain response. */\nexport function MetricsSection({ title, caption, action, children, className, ...rest }: MetricsSectionProps) {\n  return <section className={cn('folio-metrics-section', className)} {...rest}>{title && <header className=\"folio-metrics-section__header\"><div><Heading level={2}>{title}</Heading>{caption && <Text size=\"xs\" tone=\"muted\" className=\"mb-0 mt-2\">{caption}</Text>}</div>{action}</header>}{children}</section>\n}\n\nexport interface MetricsPanelProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  title: string\n  caption?: string\n  children: ReactNode\n}\n\n/** A labeled panel. Children may use the separately imported charts entry. */\nexport function MetricsPanel({ title, caption, children, className, ...rest }: MetricsPanelProps) {\n  return <section className={cn('folio-metrics-panel', className)} {...rest}><header><Heading level={3} size=\"sub\">{title}</Heading>{caption && <Text size=\"xs\" tone=\"muted\" className=\"mb-0 mt-2\">{caption}</Text>}</header>{children}</section>\n}\n\nexport interface MetricsPanelGridProps extends HTMLAttributes<HTMLDivElement> {\n  columns?: 2 | 4\n}\n\n/** Responsive grids share their dividers and minimum panel width. */\nexport function MetricsPanelGrid({ columns = 2, className, ...props }: MetricsPanelGridProps) {\n  return <div className={cn('folio-metrics-grid', className)} data-columns={columns} {...props} />\n}\n\nexport interface MetricsListProps {\n  label: string\n  items: { id: string; label: ReactNode; value: ReactNode; icon?: ReactNode }[]\n  empty: string\n}\n\nexport interface MetricsEmptyStateProps {\n  title: ReactNode\n  description: ReactNode\n}\n\n/** An empty time series retains its plot space and tells the reader what will appear once the first observation arrives. */\nexport function MetricsEmptyState({ title, description }: MetricsEmptyStateProps) {\n  return <div className=\"folio-metrics-empty\" role=\"status\"><div aria-hidden className=\"folio-metrics-empty__plot\"><span /><span /><span /><span /></div><div><Heading level={3} size=\"sub\">{title}</Heading><Text size=\"sm\" tone=\"muted\" className=\"mb-0 mt-2\">{description}</Text></div></div>\n}\n\n/** Already-formatted metric rows, with a named value relation and an explicit empty state. */\nexport function MetricsList({ label, items, empty }: MetricsListProps) {\n  if (items.length === 0) return <Text size=\"sm\" tone=\"muted\">{empty}</Text>\n  return <dl aria-label={label} className=\"folio-metrics-list\">{items.map((item) => <div key={item.id}><dt>{item.icon}<Text as=\"span\" size=\"sm\" tone=\"strong\">{item.label}</Text></dt><dd><Text as=\"span\" size=\"xs\" tone=\"muted\">{item.value}</Text></dd></div>)}</dl>\n}\n\nexport interface MetricValueProps {\n  segments: { text: string; unit?: boolean }[]\n}\n\n/** A supplied number with its units on the supporting type step. */\nexport function MetricValue({ segments }: MetricValueProps) {\n  return <>{segments.map((segment, index) => <span key={index} className={segment.unit ? 'folio-metric-unit' : undefined}>{segment.text}</span>)}</>\n}\n\nexport interface MetricDeltaProps {\n  direction: 'up' | 'down' | 'steady'\n  children: ReactNode\n}\n\n/** Neutral direction marks never assume an increase is good or a decrease is an error. */\nexport function MetricDelta({ direction, children }: MetricDeltaProps) {\n  return <Text as=\"span\" size=\"xs\" tone=\"muted\" className=\"inline-flex items-center gap-1.5\"><span aria-hidden>{direction === 'up' ? '▲' : direction === 'down' ? '▼' : '—'}</span>{children}</Text>\n}\n\nexport interface LiveCountProps {\n  value: number | null\n  label: string\n}\n\n/** Unknown live counts remain absent; a measured zero is a real reading. */\nexport function LiveCount({ value, label }: LiveCountProps) {\n  if (value === null) return null\n  return <Badge tone=\"outline\"><StatusDot tone=\"neutral\" /><span>{value} {label}</span></Badge>\n}\n"],"mappings":"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","names":[]}

package/dist/website/Music/Music.d.ts

@@ -0,0 +1,60 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface MediaPreviewAction {
+    label: string;
+    disabled?: boolean;
+    playing?: boolean;
+    onToggle: () => void;
+}
+interface MediaListRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    index: number;
+    artwork?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    trailing?: ReactNode;
+    preview: MediaPreviewAction;
+    active?: boolean;
+    artworkShape?: 'square' | 'circle';
+}
+/** A ranked recording or artist, controlled by the host's one media player. */
+declare function MediaListRow({ index, artwork, title, description, trailing, preview, active, artworkShape, className, ...rest }: MediaListRowProps): react.JSX.Element;
+interface MusicFeatureProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    label: string;
+    title: ReactNode;
+    description?: ReactNode;
+    artwork?: ReactNode;
+    artworkFallback: string;
+    live?: boolean;
+    notice?: string;
+    action?: ReactNode;
+    progress?: {
+        label: string;
+        value: number;
+        max: number;
+        currentLabel: string;
+        endLabel: string;
+    };
+}
+/** The same media feature geometry for playing, recent and unavailable recordings. */
+declare function MusicFeature({ label, title, description, artwork, artworkFallback, live, notice, action, progress, className, ...rest }: MusicFeatureProps): react.JSX.Element;
+interface MediaCollectionCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title: ReactNode;
+    artwork?: ReactNode;
+    tag?: string | null;
+    description?: string | null;
+    metadata?: ReactNode;
+    preview: MediaPreviewAction;
+}
+/** A playlist, album or other media collection with one explicit preview action. */
+declare function MediaCollectionCard({ title, artwork, tag, description, metadata, preview, className, ...rest }: MediaCollectionCardProps): react.JSX.Element;
+interface MusicSectionProps extends HTMLAttributes<HTMLElement> {
+    title: string;
+    caption?: string;
+    children: ReactNode;
+    layout?: 'list' | 'collections';
+}
+/** A media list's heading, caption and collection layout. */
+declare function MusicSection({ title, caption, children, layout, className, ...rest }: MusicSectionProps): react.JSX.Element;
+
+export { MediaCollectionCard, type MediaCollectionCardProps, MediaListRow, type MediaListRowProps, type MediaPreviewAction, MusicFeature, type MusicFeatureProps, MusicSection, type MusicSectionProps };