@arbidocs/blocks 0.5.120 → 0.5.121

package/dist/presentation/DesignMenu.js

@@ -0,0 +1,199 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ImagePlus, Palette, Plus, Trash2 } from "lucide-react";
+import { Button, Popover, PopoverContent, PopoverTrigger, cn } from "@arbidocs/react/ui";
+import { usePresentation } from "./store.js";
+import {
+  ACCENTS,
+  BACKGROUNDS,
+  FONTS,
+  backgroundCss,
+  accentColor,
+  isHexColor
+} from "./theme.js";
+function Section({ title, children }) {
+  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-xs font-medium text-muted-foreground", children: title }),
+    children
+  ] });
+}
+function CustomColor({
+  value,
+  selected,
+  label,
+  round,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      title: label,
+      className: cn(
+        "relative flex size-8 cursor-pointer items-center justify-center border border-dashed border-border text-muted-foreground hover:text-foreground",
+        round ? "rounded-full" : "rounded-md",
+        selected && "border-solid ring-2 ring-primary ring-offset-1 ring-offset-background"
+      ),
+      style: selected ? { background: value } : void 0,
+      children: [
+        !selected && /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "color",
+            value: isHexColor(value) ? value : "#1f2937",
+            onChange: (event) => onChange(event.target.value),
+            "aria-label": label,
+            className: "absolute inset-0 cursor-pointer opacity-0"
+          }
+        )
+      ]
+    }
+  );
+}
+function DesignMenu({ onChooseLogo }) {
+  const theme = usePresentation((s) => s.theme);
+  const setTheme = usePresentation((s) => s.setTheme);
+  const customBackground = isHexColor(theme.background);
+  const customAccent = !ACCENTS.some((accent) => accent.color === theme.accent);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        size: "icon",
+        variant: "ghost",
+        className: "size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11",
+        title: "Design: background, typeface, accent, logo",
+        "aria-label": "Design",
+        "data-testid": "presentation-design",
+        children: /* @__PURE__ */ jsx(Palette, { className: "size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "flex w-[21.5rem] flex-col gap-4 overflow-x-hidden p-4", children: [
+      /* @__PURE__ */ jsx(Section, { title: "Background", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-2", children: [
+        BACKGROUNDS.map((preset) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: preset.label,
+            "aria-label": `${preset.label} background`,
+            "aria-pressed": theme.background === preset.id,
+            onClick: () => setTheme({ background: preset.id }),
+            className: cn(
+              "size-8 rounded-md border border-border shadow-sm",
+              theme.background === preset.id && "ring-2 ring-primary ring-offset-1 ring-offset-background"
+            ),
+            style: { background: backgroundCss(preset.id), containerType: "inline-size" },
+            "data-testid": `design-background-${preset.id}`
+          },
+          preset.id
+        )),
+        /* @__PURE__ */ jsx(
+          CustomColor,
+          {
+            value: theme.background,
+            selected: customBackground,
+            label: "Your own background colour",
+            onChange: (background) => setTheme({ background })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Section, { title: "Typeface", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: Object.keys(FONTS).map((font) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": theme.font === font,
+          onClick: () => setTheme({ font }),
+          className: cn(
+            "flex flex-col items-center gap-0.5 rounded-md border border-border px-2 py-1.5 hover:bg-muted",
+            theme.font === font && "border-primary bg-primary/5"
+          ),
+          "data-testid": `design-font-${font}`,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xl leading-tight", style: { fontFamily: FONTS[font].css }, children: "Aa" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: FONTS[font].label })
+          ]
+        },
+        font
+      )) }) }),
+      /* @__PURE__ */ jsx(Section, { title: "Accent", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        ACCENTS.map((accent) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: accent.label,
+            "aria-label": `${accent.label} accent`,
+            "aria-pressed": theme.accent === accent.color,
+            onClick: () => setTheme({ accent: accent.color }),
+            className: cn(
+              "flex size-8 items-center justify-center rounded-full border border-black/10 shadow-sm",
+              theme.accent === accent.color && "ring-2 ring-primary ring-offset-1 ring-offset-background"
+            ),
+            style: { background: accentColor(accent.color) },
+            children: theme.accent === accent.color && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-black/70" })
+          },
+          accent.color
+        )),
+        /* @__PURE__ */ jsx(
+          CustomColor,
+          {
+            value: accentColor(theme.accent),
+            selected: customAccent,
+            label: "Your own accent colour",
+            round: true,
+            onChange: (accent) => setTheme({ accent })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Section, { title: "Logo", children: theme.logo ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm", title: theme.logo.fileName, children: theme.logo.fileName || "Logo" }),
+        /* @__PURE__ */ jsx("div", { className: "flex rounded-md border border-border p-0.5", role: "group", children: ["bl", "br"].map((corner) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": theme.logo?.corner === corner,
+            onClick: () => theme.logo && setTheme({ logo: { ...theme.logo, corner } }),
+            className: cn(
+              "rounded px-2 py-0.5 text-xs text-muted-foreground",
+              theme.logo?.corner === corner && "bg-muted text-foreground"
+            ),
+            children: corner === "bl" ? "Left" : "Right"
+          },
+          corner
+        )) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon",
+            variant: "ghost",
+            className: "size-7 text-muted-foreground",
+            title: "Remove the logo",
+            "aria-label": "Remove the logo",
+            onClick: () => setTheme({ logo: null }),
+            children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          className: "self-start",
+          disabled: !onChooseLogo,
+          onClick: onChooseLogo,
+          "data-testid": "design-choose-logo",
+          children: [
+            /* @__PURE__ */ jsx(ImagePlus, { className: "size-4" }),
+            "Choose an image\u2026"
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  DesignMenu
+};
+//# sourceMappingURL=DesignMenu.js.map

package/dist/presentation/DesignMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/DesignMenu.tsx"],
+  "sourcesContent": ["/**\n * Design: the presentation's one look, for every slide \u2014 its background (a preset, or any\n * colour), typeface, accent colour and footer logo. A popover from the header; each choice applies\n * at once (the stage behind it shows the result).\n */\n\nimport type { ReactNode } from 'react'\nimport { Check, ImagePlus, Palette, Plus, Trash2 } from 'lucide-react'\nimport { Button, Popover, PopoverContent, PopoverTrigger, cn } from '@arbidocs/react/ui'\nimport { usePresentation } from './store'\nimport {\n  ACCENTS,\n  BACKGROUNDS,\n  FONTS,\n  backgroundCss,\n  accentColor,\n  isHexColor,\n  type FontId,\n  type LogoCorner,\n} from './theme'\n\nfunction Section({ title, children }: { title: string; children: ReactNode }) {\n  return (\n    <section className=\"flex flex-col gap-2\">\n      <h3 className=\"text-xs font-medium text-muted-foreground\">{title}</h3>\n      {children}\n    </section>\n  )\n}\n\n/** A colour well: a swatch that opens the system colour picker. */\nfunction CustomColor({\n  value,\n  selected,\n  label,\n  round,\n  onChange,\n}: {\n  value: string\n  selected: boolean\n  label: string\n  round?: boolean\n  onChange: (color: string) => void\n}) {\n  return (\n    <label\n      title={label}\n      className={cn(\n        'relative flex size-8 cursor-pointer items-center justify-center border border-dashed border-border text-muted-foreground hover:text-foreground',\n        round ? 'rounded-full' : 'rounded-md',\n        selected && 'border-solid ring-2 ring-primary ring-offset-1 ring-offset-background'\n      )}\n      style={selected ? { background: value } : undefined}\n    >\n      {!selected && <Plus className=\"size-3.5\" />}\n      <input\n        type=\"color\"\n        value={isHexColor(value) ? value : '#1f2937'}\n        onChange={(event) => onChange(event.target.value)}\n        aria-label={label}\n        className=\"absolute inset-0 cursor-pointer opacity-0\"\n      />\n    </label>\n  )\n}\n\nexport function DesignMenu({ onChooseLogo }: { onChooseLogo?: () => void }) {\n  const theme = usePresentation((s) => s.theme)\n  const setTheme = usePresentation((s) => s.setTheme)\n  const customBackground = isHexColor(theme.background)\n  const customAccent = !ACCENTS.some((accent) => accent.color === theme.accent)\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n          title=\"Design: background, typeface, accent, logo\"\n          aria-label=\"Design\"\n          data-testid=\"presentation-design\"\n        >\n          <Palette className=\"size-4\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"flex w-[21.5rem] flex-col gap-4 overflow-x-hidden p-4\">\n        <Section title=\"Background\">\n          <div className=\"grid grid-cols-7 gap-2\">\n            {BACKGROUNDS.map((preset) => (\n              <button\n                key={preset.id}\n                type=\"button\"\n                title={preset.label}\n                aria-label={`${preset.label} background`}\n                aria-pressed={theme.background === preset.id}\n                onClick={() => setTheme({ background: preset.id })}\n                className={cn(\n                  'size-8 rounded-md border border-border shadow-sm',\n                  theme.background === preset.id &&\n                    'ring-2 ring-primary ring-offset-1 ring-offset-background'\n                )}\n                style={{ background: backgroundCss(preset.id), containerType: 'inline-size' }}\n                data-testid={`design-background-${preset.id}`}\n              />\n            ))}\n            <CustomColor\n              value={theme.background}\n              selected={customBackground}\n              label=\"Your own background colour\"\n              onChange={(background) => setTheme({ background })}\n            />\n          </div>\n        </Section>\n\n        <Section title=\"Typeface\">\n          <div className=\"grid grid-cols-3 gap-2\">\n            {(Object.keys(FONTS) as FontId[]).map((font) => (\n              <button\n                key={font}\n                type=\"button\"\n                aria-pressed={theme.font === font}\n                onClick={() => setTheme({ font })}\n                className={cn(\n                  'flex flex-col items-center gap-0.5 rounded-md border border-border px-2 py-1.5 hover:bg-muted',\n                  theme.font === font && 'border-primary bg-primary/5'\n                )}\n                data-testid={`design-font-${font}`}\n              >\n                <span className=\"text-xl leading-tight\" style={{ fontFamily: FONTS[font].css }}>\n                  Aa\n                </span>\n                <span className=\"text-[11px] text-muted-foreground\">{FONTS[font].label}</span>\n              </button>\n            ))}\n          </div>\n        </Section>\n\n        <Section title=\"Accent\">\n          <div className=\"flex items-center gap-2\">\n            {ACCENTS.map((accent) => (\n              <button\n                key={accent.color}\n                type=\"button\"\n                title={accent.label}\n                aria-label={`${accent.label} accent`}\n                aria-pressed={theme.accent === accent.color}\n                onClick={() => setTheme({ accent: accent.color })}\n                className={cn(\n                  'flex size-8 items-center justify-center rounded-full border border-black/10 shadow-sm',\n                  theme.accent === accent.color &&\n                    'ring-2 ring-primary ring-offset-1 ring-offset-background'\n                )}\n                style={{ background: accentColor(accent.color) }}\n              >\n                {theme.accent === accent.color && <Check className=\"size-3.5 text-black/70\" />}\n              </button>\n            ))}\n            <CustomColor\n              value={accentColor(theme.accent)}\n              selected={customAccent}\n              label=\"Your own accent colour\"\n              round\n              onChange={(accent) => setTheme({ accent })}\n            />\n          </div>\n        </Section>\n\n        <Section title=\"Logo\">\n          {theme.logo ? (\n            <div className=\"flex items-center gap-2\">\n              <span className=\"min-w-0 flex-1 truncate text-sm\" title={theme.logo.fileName}>\n                {theme.logo.fileName || 'Logo'}\n              </span>\n              <div className=\"flex rounded-md border border-border p-0.5\" role=\"group\">\n                {(['bl', 'br'] as LogoCorner[]).map((corner) => (\n                  <button\n                    key={corner}\n                    type=\"button\"\n                    aria-pressed={theme.logo?.corner === corner}\n                    onClick={() => theme.logo && setTheme({ logo: { ...theme.logo, corner } })}\n                    className={cn(\n                      'rounded px-2 py-0.5 text-xs text-muted-foreground',\n                      theme.logo?.corner === corner && 'bg-muted text-foreground'\n                    )}\n                  >\n                    {corner === 'bl' ? 'Left' : 'Right'}\n                  </button>\n                ))}\n              </div>\n              <Button\n                type=\"button\"\n                size=\"icon\"\n                variant=\"ghost\"\n                className=\"size-7 text-muted-foreground\"\n                title=\"Remove the logo\"\n                aria-label=\"Remove the logo\"\n                onClick={() => setTheme({ logo: null })}\n              >\n                <Trash2 className=\"size-3.5\" />\n              </Button>\n            </div>\n          ) : (\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"self-start\"\n              disabled={!onChooseLogo}\n              onClick={onChooseLogo}\n              data-testid=\"design-choose-logo\"\n            >\n              <ImagePlus className=\"size-4\" />\n              Choose an image\u2026\n            </Button>\n          )}\n        </Section>\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/presentation/LayoutMenu.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The current slide's layout: a menu of the layouts, each drawn in miniature from the geometry
+ * the stage uses (its title, text and the room its clips take), so what is picked is what shows.
+ */
+import { type SlideLayout } from './model';
+/** A layout in miniature: title and text as bars, the clips' room as light blocks. */
+export declare function LayoutThumb({ layout, className }: {
+    layout: SlideLayout;
+    className?: string;
+}): import("react").JSX.Element;
+/** A slide's layout (default the current slide's). */
+export declare function LayoutMenu({ index, className, compact, }: {
+    index?: number;
+    className?: string;
+    /** The layout's miniature alone (no chevron): a narrow column. */
+    compact?: boolean;
+}): import("react").JSX.Element;

package/dist/presentation/LayoutMenu.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  cn
+} from "@arbidocs/react/ui";
+import { STAGE_MARGIN, SLIDE_LAYOUTS } from "./model.js";
+import { LAYOUT_INFO, slideGeometry } from "./slide-layout.js";
+import { currentSlide, usePresentation } from "./store.js";
+const at = (box) => ({
+  left: `${box.x * 100}%`,
+  top: `${box.y * 100}%`,
+  width: `${box.w * 100}%`,
+  height: `${box.h * 100}%`
+});
+function LayoutThumb({ layout, className }) {
+  const geometry = slideGeometry({ layout, caption: "Title" }, { labels: false, logo: null });
+  const { top, right = 0, bottom = 0, columns } = geometry.reserve;
+  const room = {
+    x: STAGE_MARGIN,
+    y: STAGE_MARGIN + top,
+    w: 1 - 2 * STAGE_MARGIN - right,
+    h: 1 - 2 * STAGE_MARGIN - top - bottom
+  };
+  const blocks = layout === "title" || layout === "section" || layout === "free" ? [] : columns === 2 ? [
+    { ...room, w: room.w / 2 - 0.02 },
+    { ...room, x: room.x + room.w / 2 + 0.02, w: room.w / 2 - 0.02 }
+  ] : [room];
+  const title = geometry.title;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "relative block aspect-video shrink-0 overflow-hidden rounded-[3px] bg-zinc-800",
+        className
+      ),
+      children: [
+        title && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute rounded-full bg-white/90",
+            style: at({
+              x: title.align === "center" ? title.x + title.w * 0.2 : title.x,
+              y: title.y + title.h * 0.3,
+              w: title.align === "center" ? title.w * 0.6 : title.w * 0.55,
+              h: Math.max(0.05, title.h * 0.35)
+            })
+          }
+        ),
+        geometry.text && [0, 1, 2].slice(0, geometry.text.bullets ? 3 : 1).map((line) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute rounded-full bg-white/45",
+            style: at({
+              x: geometry.text.align === "center" ? geometry.text.x + geometry.text.w * 0.3 : geometry.text.x,
+              y: geometry.text.y + line * 0.1,
+              w: geometry.text.align === "center" ? geometry.text.w * 0.4 : geometry.text.w * 0.85,
+              h: 0.045
+            })
+          },
+          line
+        )),
+        blocks.map((block, index) => /* @__PURE__ */ jsx("span", { className: "absolute rounded-[1px] bg-white/25", style: at(block) }, index))
+      ]
+    }
+  );
+}
+function LayoutMenu({
+  index,
+  className,
+  compact = false
+}) {
+  const layout = usePresentation(
+    (s) => (index === void 0 ? currentSlide(s) : s.slides[index])?.layout ?? "clips"
+  );
+  const setSlideLayout = usePresentation((s) => s.setSlideLayout);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: cn(
+          "h-7 gap-1.5 px-1.5 text-xs text-muted-foreground hover:text-foreground",
+          className
+        ),
+        title: "Slide layout",
+        "aria-label": `Slide layout: ${LAYOUT_INFO[layout].label}`,
+        "data-testid": "presentation-layout",
+        children: [
+          /* @__PURE__ */ jsx(LayoutThumb, { layout, className: compact ? "w-6" : "w-7" }),
+          !compact && /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-56", children: SLIDE_LAYOUTS.map((option) => /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        onSelect: () => setSlideLayout(option, index),
+        className: cn(option === layout && "bg-accent"),
+        "data-testid": `presentation-layout-${option}`,
+        children: [
+          /* @__PURE__ */ jsx(LayoutThumb, { layout: option, className: "w-12" }),
+          /* @__PURE__ */ jsx("span", { children: LAYOUT_INFO[option].label })
+        ]
+      },
+      option
+    )) })
+  ] });
+}
+export {
+  LayoutMenu,
+  LayoutThumb
+};
+//# sourceMappingURL=LayoutMenu.js.map

package/dist/presentation/LayoutMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/LayoutMenu.tsx"],
+  "sourcesContent": ["/**\n * The current slide's layout: a menu of the layouts, each drawn in miniature from the geometry\n * the stage uses (its title, text and the room its clips take), so what is picked is what shows.\n */\n\nimport { ChevronDown } from 'lucide-react'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  cn,\n} from '@arbidocs/react/ui'\nimport { STAGE_MARGIN, SLIDE_LAYOUTS, type SlideLayout } from './model'\nimport { LAYOUT_INFO, slideGeometry, type Box } from './slide-layout'\nimport { currentSlide, usePresentation } from './store'\n\nconst at = (box: Box) => ({\n  left: `${box.x * 100}%`,\n  top: `${box.y * 100}%`,\n  width: `${box.w * 100}%`,\n  height: `${box.h * 100}%`,\n})\n\n/** A layout in miniature: title and text as bars, the clips' room as light blocks. */\nexport function LayoutThumb({ layout, className }: { layout: SlideLayout; className?: string }) {\n  const geometry = slideGeometry({ layout, caption: 'Title' }, { labels: false, logo: null })\n  const { top, right = 0, bottom = 0, columns } = geometry.reserve\n  const room = {\n    x: STAGE_MARGIN,\n    y: STAGE_MARGIN + top,\n    w: 1 - 2 * STAGE_MARGIN - right,\n    h: 1 - 2 * STAGE_MARGIN - top - bottom,\n  }\n  const blocks =\n    layout === 'title' || layout === 'section' || layout === 'free'\n      ? []\n      : columns === 2\n        ? [\n            { ...room, w: room.w / 2 - 0.02 },\n            { ...room, x: room.x + room.w / 2 + 0.02, w: room.w / 2 - 0.02 },\n          ]\n        : [room]\n  const title = geometry.title\n  return (\n    <span\n      aria-hidden\n      className={cn(\n        'relative block aspect-video shrink-0 overflow-hidden rounded-[3px] bg-zinc-800',\n        className\n      )}\n    >\n      {title && (\n        <span\n          className=\"absolute rounded-full bg-white/90\"\n          style={at({\n            x: title.align === 'center' ? title.x + title.w * 0.2 : title.x,\n            y: title.y + title.h * 0.3,\n            w: title.align === 'center' ? title.w * 0.6 : title.w * 0.55,\n            h: Math.max(0.05, title.h * 0.35),\n          })}\n        />\n      )}\n      {geometry.text &&\n        [0, 1, 2].slice(0, geometry.text.bullets ? 3 : 1).map((line) => (\n          <span\n            key={line}\n            className=\"absolute rounded-full bg-white/45\"\n            style={at({\n              x:\n                geometry.text!.align === 'center'\n                  ? geometry.text!.x + geometry.text!.w * 0.3\n                  : geometry.text!.x,\n              y: geometry.text!.y + line * 0.1,\n              w:\n                geometry.text!.align === 'center'\n                  ? geometry.text!.w * 0.4\n                  : geometry.text!.w * 0.85,\n              h: 0.045,\n            })}\n          />\n        ))}\n      {blocks.map((block, index) => (\n        <span key={index} className=\"absolute rounded-[1px] bg-white/25\" style={at(block)} />\n      ))}\n    </span>\n  )\n}\n\n/** A slide's layout (default the current slide's). */\nexport function LayoutMenu({\n  index,\n  className,\n  compact = false,\n}: {\n  index?: number\n  className?: string\n  /** The layout's miniature alone (no chevron): a narrow column. */\n  compact?: boolean\n}) {\n  const layout = usePresentation(\n    (s) => (index === undefined ? currentSlide(s) : s.slides[index])?.layout ?? 'clips'\n  )\n  const setSlideLayout = usePresentation((s) => s.setSlideLayout)\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          className={cn(\n            'h-7 gap-1.5 px-1.5 text-xs text-muted-foreground hover:text-foreground',\n            className\n          )}\n          title=\"Slide layout\"\n          aria-label={`Slide layout: ${LAYOUT_INFO[layout].label}`}\n          data-testid=\"presentation-layout\"\n        >\n          <LayoutThumb layout={layout} className={compact ? 'w-6' : 'w-7'} />\n          {!compact && <ChevronDown className=\"size-3\" />}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"w-56\">\n        {SLIDE_LAYOUTS.map((option) => (\n          <DropdownMenuItem\n            key={option}\n            onSelect={() => setSlideLayout(option, index)}\n            className={cn(option === layout && 'bg-accent')}\n            data-testid={`presentation-layout-${option}`}\n          >\n            <LayoutThumb layout={option} className=\"w-12\" />\n            <span>{LAYOUT_INFO[option].label}</span>\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/presentation/MediaClip.d.ts

@@ -0,0 +1,15 @@
+/**
+ * An image or video clip: the original file, cropped to the clipped area with CSS (the element is
+ * scaled so the area fills the box), so the browser draws it from the file's own pixels: its
+ * native resolution, nothing re-encoded.
+ *
+ * A video clip waits at its start, muted, in the editor and the tray. On the presented stage
+ * (`live`) it has its sound and is played and paused with Space (`toggleStageVideos`); no
+ * controls are ever drawn, since the stage is what the audience sees.
+ */
+import type { Clip } from './model';
+export declare function MediaClip({ clip, className, live, }: {
+    clip: Clip;
+    className?: string;
+    live: boolean;
+}): import("react").JSX.Element;

package/dist/presentation/MediaClip.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "@arbidocs/react/ui";
+import { STAGE_VIDEO_ATTRIBUTE } from "./stage-videos.js";
+import { useObjectUrl } from "./useObjectUrl.js";
+function cropStyle(rect) {
+  return {
+    position: "absolute",
+    width: `${100 / rect.w}%`,
+    height: `${100 / rect.h}%`,
+    left: `${-rect.x / rect.w * 100}%`,
+    top: `${-rect.y / rect.h * 100}%`,
+    maxWidth: "none"
+  };
+}
+function MediaClip({
+  clip,
+  className,
+  live
+}) {
+  const url = useObjectUrl(clip.source);
+  const videoRef = useRef(null);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const toStart = () => {
+      video.currentTime = clip.start ?? 0;
+    };
+    if (video.readyState >= 1) toStart();
+    else video.addEventListener("loadedmetadata", toStart, { once: true });
+    return () => video.removeEventListener("loadedmetadata", toStart);
+  }, [clip.start, url]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative h-full w-full overflow-hidden bg-black", className),
+      "data-testid": `clip-image-${clip.id}`,
+      children: clip.kind === "video" ? /* @__PURE__ */ jsx(
+        "video",
+        {
+          ref: videoRef,
+          src: url,
+          muted: !live,
+          playsInline: true,
+          preload: "auto",
+          className: "pointer-events-none block select-none",
+          style: cropStyle(clip.rect),
+          ...live ? { [STAGE_VIDEO_ATTRIBUTE]: "" } : {}
+        }
+      ) : /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: url,
+          alt: clip.caption,
+          draggable: false,
+          className: "pointer-events-none block select-none",
+          style: cropStyle(clip.rect)
+        }
+      )
+    }
+  );
+}
+export {
+  MediaClip
+};
+//# sourceMappingURL=MediaClip.js.map

package/dist/presentation/MediaClip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/MediaClip.tsx"],
+  "sourcesContent": ["/**\n * An image or video clip: the original file, cropped to the clipped area with CSS (the element is\n * scaled so the area fills the box), so the browser draws it from the file's own pixels: its\n * native resolution, nothing re-encoded.\n *\n * A video clip waits at its start, muted, in the editor and the tray. On the presented stage\n * (`live`) it has its sound and is played and paused with Space (`toggleStageVideos`); no\n * controls are ever drawn, since the stage is what the audience sees.\n */\n\nimport { useEffect, useRef, type CSSProperties } from 'react'\nimport { cn } from '@arbidocs/react/ui'\nimport type { Clip } from './model'\nimport { STAGE_VIDEO_ATTRIBUTE } from './stage-videos'\nimport { useObjectUrl } from './useObjectUrl'\n\n/** The element scaled and shifted so the clipped area fills its box. */\nfunction cropStyle(rect: Clip['rect']): CSSProperties {\n  return {\n    position: 'absolute',\n    width: `${100 / rect.w}%`,\n    height: `${100 / rect.h}%`,\n    left: `${(-rect.x / rect.w) * 100}%`,\n    top: `${(-rect.y / rect.h) * 100}%`,\n    maxWidth: 'none',\n  }\n}\n\nexport function MediaClip({\n  clip,\n  className,\n  live,\n}: {\n  clip: Clip\n  className?: string\n  live: boolean\n}) {\n  const url = useObjectUrl(clip.source)\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  // A video shows its first frame at the clip's start.\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video) return\n    const toStart = () => {\n      video.currentTime = clip.start ?? 0\n    }\n    if (video.readyState >= 1) toStart()\n    else video.addEventListener('loadedmetadata', toStart, { once: true })\n    return () => video.removeEventListener('loadedmetadata', toStart)\n  }, [clip.start, url])\n\n  return (\n    <div\n      className={cn('relative h-full w-full overflow-hidden bg-black', className)}\n      data-testid={`clip-image-${clip.id}`}\n    >\n      {clip.kind === 'video' ? (\n        <video\n          ref={videoRef}\n          src={url}\n          muted={!live}\n          playsInline\n          preload=\"auto\"\n          className=\"pointer-events-none block select-none\"\n          style={cropStyle(clip.rect)}\n          {...(live ? { [STAGE_VIDEO_ATTRIBUTE]: '' } : {})}\n        />\n      ) : (\n        <img\n          src={url}\n          alt={clip.caption}\n          draggable={false}\n          className=\"pointer-events-none block select-none\"\n          style={cropStyle(clip.rect)}\n        />\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": ";AA0DQ;AAhDR,SAAS,WAAW,cAAkC;AACtD,SAAS,UAAU;AAEnB,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAG7B,SAAS,UAAU,MAAmC;AACpD,SAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO,GAAG,MAAM,KAAK,CAAC;AAAA,IACtB,QAAQ,GAAG,MAAM,KAAK,CAAC;AAAA,IACvB,MAAM,GAAI,CAAC,KAAK,IAAI,KAAK,IAAK,GAAG;AAAA,IACjC,KAAK,GAAI,CAAC,KAAK,IAAI,KAAK,IAAK,GAAG;AAAA,IAChC,UAAU;AAAA,EACZ;AACF;AAEO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,MAAM,aAAa,KAAK,MAAM;AACpC,QAAM,WAAW,OAAyB,IAAI;AAG9C,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,MAAO;AACZ,UAAM,UAAU,MAAM;AACpB,YAAM,cAAc,KAAK,SAAS;AAAA,IACpC;AACA,QAAI,MAAM,cAAc,EAAG,SAAQ;AAAA,QAC9B,OAAM,iBAAiB,kBAAkB,SAAS,EAAE,MAAM,KAAK,CAAC;AACrE,WAAO,MAAM,MAAM,oBAAoB,kBAAkB,OAAO;AAAA,EAClE,GAAG,CAAC,KAAK,OAAO,GAAG,CAAC;AAEpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,mDAAmD,SAAS;AAAA,MAC1E,eAAa,cAAc,KAAK,EAAE;AAAA,MAEjC,eAAK,SAAS,UACb;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,KAAK;AAAA,UACL,OAAO,CAAC;AAAA,UACR,aAAW;AAAA,UACX,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,OAAO,UAAU,KAAK,IAAI;AAAA,UACzB,GAAI,OAAO,EAAE,CAAC,qBAAqB,GAAG,GAAG,IAAI,CAAC;AAAA;AAAA,MACjD,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,KAAK,KAAK;AAAA,UACV,WAAW;AAAA,UACX,WAAU;AAAA,UACV,OAAO,UAAU,KAAK,IAAI;AAAA;AAAA,MAC5B;AAAA;AAAA,EAEJ;AAEJ;",
+  "names": []
+}

package/dist/presentation/Notice.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The presentation's own messages (saved, failed…), shown where it is edited: the app's
+ * notifications show in the app's window, out of sight behind a popped-out editor. Above its
+ * dialogs.
+ */
+export declare function Notice(): import("react").JSX.Element | null;

package/dist/presentation/Notice.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { CircleAlert, CircleCheck, X } from "lucide-react";
+import { usePresentation } from "./store.js";
+function Notice() {
+  const notice = usePresentation((s) => s.notice);
+  useEffect(() => {
+    if (!notice) return;
+    const timer = setTimeout(
+      () => usePresentation.getState().clearNotice(notice.id),
+      notice.kind === "error" ? 8e3 : 3e3
+    );
+    return () => clearTimeout(timer);
+  }, [notice]);
+  if (!notice) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: notice.kind === "error" ? "alert" : "status",
+      className: "pointer-events-auto fixed left-1/2 top-3 z-[100] flex max-w-[90vw] -translate-x-1/2 items-center gap-2 rounded-lg border border-border bg-popover px-3 py-2 text-sm shadow-lg",
+      "data-testid": "presentation-notice",
+      children: [
+        notice.kind === "error" ? /* @__PURE__ */ jsx(CircleAlert, { className: "size-4 shrink-0 text-destructive" }) : /* @__PURE__ */ jsx(CircleCheck, { className: "size-4 shrink-0 text-primary" }),
+        /* @__PURE__ */ jsx("span", { children: notice.text }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ml-1 rounded p-0.5 text-muted-foreground hover:text-foreground",
+            "aria-label": "Dismiss",
+            onClick: () => usePresentation.getState().clearNotice(notice.id),
+            children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Notice
+};
+//# sourceMappingURL=Notice.js.map

package/dist/presentation/Notice.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/Notice.tsx"],
+  "sourcesContent": ["import { useEffect } from 'react'\nimport { CircleAlert, CircleCheck, X } from 'lucide-react'\nimport { usePresentation } from './store'\n\n/**\n * The presentation's own messages (saved, failed\u2026), shown where it is edited: the app's\n * notifications show in the app's window, out of sight behind a popped-out editor. Above its\n * dialogs.\n */\nexport function Notice() {\n  const notice = usePresentation((s) => s.notice)\n  useEffect(() => {\n    if (!notice) return\n    const timer = setTimeout(\n      () => usePresentation.getState().clearNotice(notice.id),\n      notice.kind === 'error' ? 8000 : 3000\n    )\n    return () => clearTimeout(timer)\n  }, [notice])\n  if (!notice) return null\n  return (\n    <div\n      role={notice.kind === 'error' ? 'alert' : 'status'}\n      className=\"pointer-events-auto fixed left-1/2 top-3 z-[100] flex max-w-[90vw] -translate-x-1/2 items-center gap-2 rounded-lg border border-border bg-popover px-3 py-2 text-sm shadow-lg\"\n      data-testid=\"presentation-notice\"\n    >\n      {notice.kind === 'error' ? (\n        <CircleAlert className=\"size-4 shrink-0 text-destructive\" />\n      ) : (\n        <CircleCheck className=\"size-4 shrink-0 text-primary\" />\n      )}\n      <span>{notice.text}</span>\n      <button\n        type=\"button\"\n        className=\"ml-1 rounded p-0.5 text-muted-foreground hover:text-foreground\"\n        aria-label=\"Dismiss\"\n        onClick={() => usePresentation.getState().clearNotice(notice.id)}\n      >\n        <X className=\"size-3.5\" />\n      </button>\n    </div>\n  )\n}\n"],
+  "mappings": ";AAqBI,SAMI,KANJ;AArBJ,SAAS,iBAAiB;AAC1B,SAAS,aAAa,aAAa,SAAS;AAC5C,SAAS,uBAAuB;AAOzB,SAAS,SAAS;AACvB,QAAM,SAAS,gBAAgB,CAAC,MAAM,EAAE,MAAM;AAC9C,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,QAAQ;AAAA,MACZ,MAAM,gBAAgB,SAAS,EAAE,YAAY,OAAO,EAAE;AAAA,MACtD,OAAO,SAAS,UAAU,MAAO;AAAA,IACnC;AACA,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,MAAM,CAAC;AACX,MAAI,CAAC,OAAQ,QAAO;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,OAAO,SAAS,UAAU,UAAU;AAAA,MAC1C,WAAU;AAAA,MACV,eAAY;AAAA,MAEX;AAAA,eAAO,SAAS,UACf,oBAAC,eAAY,WAAU,oCAAmC,IAE1D,oBAAC,eAAY,WAAU,gCAA+B;AAAA,QAExD,oBAAC,UAAM,iBAAO,MAAK;AAAA,QACnB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAW;AAAA,YACX,SAAS,MAAM,gBAAgB,SAAS,EAAE,YAAY,OAAO,EAAE;AAAA,YAE/D,8BAAC,KAAE,WAAU,YAAW;AAAA;AAAA,QAC1B;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/presentation/PresentationStage.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The 16:9 stage: a slide's clips in their frames, its title, points and logo, as large as the
+ * container allows. Presenting shows it bare; the editor's copy is `editable`: each clip
+ * (`StageItem`) is moved, resized and reshaped by dragging, snapping with guide lines; clips are
+ * selected for their floating actions, and clips dragged from the tray are dropped onto it.
+ *
+ * A slide's stage re-renders only when its slide (or the clips, theme or labels) change; a clip's
+ * drag re-renders nothing here but the guides and, at its start and end, the floating actions.
+ */
+import { type ReactNode } from 'react';
+import { type SlideTextEditing } from './SlideDecor';
+import { type Guide } from './model';
+export interface PresentationStageProps {
+    editable?: boolean;
+    /** The slide shown (default: the current one). */
+    slideIndex?: number;
+    selected?: string | null;
+    onSelect?: (clipId: string | null) => void;
+    /** Offered on a selected image clip: make a new version of it. */
+    onEditImage?: (clipId: string) => void;
+    /** Offered on a selected image clip: choose the part of the image it shows. */
+    onCropImage?: (clipId: string) => void;
+    /** Typing the slide's title and points on the slide itself (the editor's stages). */
+    textEditing?: SlideTextEditing;
+    /** Over the slide (e.g. the editor's hover actions). */
+    overlay?: ReactNode;
+    className?: string;
+}
+export interface GuideLayerHandle {
+    set(guides: Guide[]): void;
+}
+export declare function PresentationStage({ editable, slideIndex, selected, onSelect, onEditImage, onCropImage, textEditing, overlay, className, }: PresentationStageProps): import("react").JSX.Element;