@krizaka/ui 2.3.0 → 2.4.0

package/registry/examples/pagination/native/pages.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/pagination/native/pages.tsx
+import { Pagination } from "@krizaka/ui/native";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function NativePaginationPages() {
+  const [page, setPage] = React.useState(3);
+  return /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      page,
+      pageCount: 12,
+      onPageChange: setPage,
+      labels: { previous: "Previous page", next: "Next page", compact: (p, count) => `Page ${p} of ${count}` }
+    }
+  );
+}
+export {
+  NativePaginationPages as default
+};

package/registry/examples/pagination/native/pages.tsx

@@ -0,0 +1,14 @@
+import { Pagination } from "@krizaka/ui/native";
+import * as React from "react";
+
+export default function NativePaginationPages() {
+  const [page, setPage] = React.useState(3);
+  return (
+    <Pagination
+      page={page}
+      pageCount={12}
+      onPageChange={setPage}
+      labels={{ previous: "Previous page", next: "Next page", compact: (p, count) => `Page ${p} of ${count}` }}
+    />
+  );
+}

package/registry/examples/pagination/results.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/pagination/results.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/pagination/results.tsx
+import { Pagination } from "@krizaka/ui/pagination";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function PaginationResults() {
+  const [page, setPage] = React.useState(4);
+  const first = (page - 1) * 20 + 1;
+  return /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      page,
+      pageCount: 20,
+      onPageChange: setPage,
+      status: `${first}\u2013${Math.min(first + 19, 392)} of 392 videos`,
+      labels: { nav: "Pages of results" }
+    }
+  );
+}
+export {
+  PaginationResults as default
+};

package/registry/examples/pagination/results.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Pagination } from "@krizaka/ui/pagination";
+import * as React from "react";
+
+// The explore page of a video platform: 392 results, 20 per page.
+export default function PaginationResults() {
+  const [page, setPage] = React.useState(4);
+  const first = (page - 1) * 20 + 1;
+  return (
+    <Pagination
+      page={page}
+      pageCount={20}
+      onPageChange={setPage}
+      status={`${first}–${Math.min(first + 19, 392)} of 392 videos`}
+      labels={{ nav: "Pages of results" }}
+    />
+  );
+}

package/registry/examples/pagination/table-footer.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/pagination/table-footer.js

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/pagination/table-footer.tsx
+import { Pagination } from "@krizaka/ui/pagination";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function PaginationTableFooter() {
+  const [page, setPage] = React.useState(1);
+  const [size, setSize] = React.useState(20);
+  const total = 1284;
+  const count = Math.ceil(total / size);
+  const first = (page - 1) * size + 1;
+  return /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      page,
+      pageCount: count,
+      onPageChange: setPage,
+      pageSize: size,
+      pageSizeOptions: [10, 20, 50],
+      onPageSizeChange: (next) => {
+        setSize(next);
+        setPage(1);
+      },
+      status: `${first.toLocaleString("en")}\u2013${Math.min(first + size - 1, total).toLocaleString("en")} of ${total.toLocaleString("en")}`
+    }
+  );
+}
+export {
+  PaginationTableFooter as default
+};

package/registry/examples/pagination/table-footer.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Pagination } from "@krizaka/ui/pagination";
+import * as React from "react";
+
+// Under an admin table: rows per page, the range shown, the pages.
+export default function PaginationTableFooter() {
+  const [page, setPage] = React.useState(1);
+  const [size, setSize] = React.useState(20);
+  const total = 1284;
+  const count = Math.ceil(total / size);
+  const first = (page - 1) * size + 1;
+  return (
+    <Pagination
+      page={page}
+      pageCount={count}
+      onPageChange={setPage}
+      pageSize={size}
+      pageSizeOptions={[10, 20, 50]}
+      onPageSizeChange={(next) => {
+        setSize(next);
+        setPage(1);
+      }}
+      status={`${first.toLocaleString("en")}–${Math.min(first + size - 1, total).toLocaleString("en")} of ${total.toLocaleString("en")}`}
+    />
+  );
+}

package/registry/examples/search-field/global.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/search-field/global.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/search-field/global.tsx
+import { SearchField } from "@krizaka/ui/search-field";
+import { jsx } from "react/jsx-runtime";
+function SearchFieldGlobal() {
+  return /* @__PURE__ */ jsx(
+    SearchField,
+    {
+      label: "Search Orochia",
+      placeholder: "Search creators, videos, tags",
+      shortcut: "k",
+      onSubmit: (query) => window.location.assign(`/explore?q=${encodeURIComponent(query)}`)
+    }
+  );
+}
+export {
+  SearchFieldGlobal as default
+};

package/registry/examples/search-field/global.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { SearchField } from "@krizaka/ui/search-field";
+
+// The site's search: ⌘K (Ctrl+K) focuses it from anywhere, Enter goes to the results.
+export default function SearchFieldGlobal() {
+  return (
+    <SearchField
+      label="Search Orochia"
+      placeholder="Search creators, videos, tags"
+      shortcut="k"
+      onSubmit={(query) => window.location.assign(`/explore?q=${encodeURIComponent(query)}`)}
+    />
+  );
+}

package/registry/examples/search-field/native/default.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/search-field/native/default.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/search-field/native/default.tsx
+import { SearchField } from "@krizaka/ui/native";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function NativeSearchFieldDefault() {
+  const [query, setQuery] = React.useState("sunset");
+  return /* @__PURE__ */ jsx(SearchField, { label: "Search videos", placeholder: "Search videos", value: query, onValueChange: setQuery, clearLabel: "Clear search" });
+}
+export {
+  NativeSearchFieldDefault as default
+};

package/registry/examples/search-field/native/default.tsx

@@ -0,0 +1,7 @@
+import { SearchField } from "@krizaka/ui/native";
+import * as React from "react";
+
+export default function NativeSearchFieldDefault() {
+  const [query, setQuery] = React.useState("sunset");
+  return <SearchField label="Search videos" placeholder="Search videos" value={query} onValueChange={setQuery} clearLabel="Clear search" />;
+}

package/registry/examples/search-field/suggestions.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/search-field/suggestions.js

@@ -0,0 +1,30 @@
+"use client";
+
+// registry/examples/search-field/suggestions.tsx
+import { SearchField } from "@krizaka/ui/search-field";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var RECENT = [
+  { value: "sunset", label: "sunset timelapse", meta: "Tag" },
+  { value: "eric", label: "Eric Tremblay", meta: "Creator" },
+  { value: "studio", label: "studio lighting", meta: "2 days ago" }
+];
+function SearchFieldSuggestions() {
+  const [query, setQuery] = React.useState("");
+  const shown = RECENT.filter((s) => s.label.includes(query.toLowerCase()));
+  return /* @__PURE__ */ jsx(
+    SearchField,
+    {
+      label: "Search videos",
+      placeholder: "Search videos",
+      value: query,
+      onValueChange: setQuery,
+      suggestions: shown,
+      suggestionsLabel: "Recent searches",
+      onSuggestionSelect: (s) => setQuery(s.label)
+    }
+  );
+}
+export {
+  SearchFieldSuggestions as default
+};

package/registry/examples/search-field/suggestions.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { SearchField } from "@krizaka/ui/search-field";
+import * as React from "react";
+
+const RECENT = [
+  { value: "sunset", label: "sunset timelapse", meta: "Tag" },
+  { value: "eric", label: "Eric Tremblay", meta: "Creator" },
+  { value: "studio", label: "studio lighting", meta: "2 days ago" },
+];
+
+// Recent searches under the field: the arrows walk them, Enter picks one.
+export default function SearchFieldSuggestions() {
+  const [query, setQuery] = React.useState("");
+  const shown = RECENT.filter((s) => s.label.includes(query.toLowerCase()));
+  return (
+    <SearchField
+      label="Search videos"
+      placeholder="Search videos"
+      value={query}
+      onValueChange={setQuery}
+      suggestions={shown}
+      suggestionsLabel="Recent searches"
+      onSuggestionSelect={(s) => setQuery(s.label)}
+    />
+  );
+}

package/registry/examples/search-field/toolbar.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/search-field/toolbar.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/search-field/toolbar.tsx
+import { SearchField } from "@krizaka/ui/search-field";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MODELS = ["Flux 1.1", "Whisper large", "XTTS v2", "Llama 3.3", "Qwen 2.5"];
+function SearchFieldToolbar() {
+  const [query, setQuery] = React.useState("");
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-72 flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(SearchField, { label: "Filter models", placeholder: "Filter models", size: "sm", landmark: false, onSearch: setQuery, debounce: 150 }),
+    /* @__PURE__ */ jsx("ul", { className: "text-sm text-fg-secondary", children: MODELS.filter((m) => m.toLowerCase().includes(query.toLowerCase())).map((m) => /* @__PURE__ */ jsx("li", { children: m }, m)) })
+  ] });
+}
+export {
+  SearchFieldToolbar as default
+};

package/registry/examples/search-field/toolbar.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { SearchField } from "@krizaka/ui/search-field";
+import * as React from "react";
+
+const MODELS = ["Flux 1.1", "Whisper large", "XTTS v2", "Llama 3.3", "Qwen 2.5"];
+
+// A small field that filters a list as you type (debounced).
+export default function SearchFieldToolbar() {
+  const [query, setQuery] = React.useState("");
+  return (
+    <div className="flex w-72 flex-col gap-2">
+      <SearchField label="Filter models" placeholder="Filter models" size="sm" landmark={false} onSearch={setQuery} debounce={150} />
+      <ul className="text-sm text-fg-secondary">
+        {MODELS.filter((m) => m.toLowerCase().includes(query.toLowerCase())).map((m) => (
+          <li key={m}>{m}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/registry/examples/tag-input/recipients.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/tag-input/recipients.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/tag-input/recipients.tsx
+import { TagInput } from "@krizaka/ui/tag-input";
+import { jsx } from "react/jsx-runtime";
+var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function TagInputRecipients() {
+  return /* @__PURE__ */ jsx(
+    TagInput,
+    {
+      label: "Invite by e-mail",
+      placeholder: "name@example.com",
+      defaultValue: ["ines@krizaka.com"],
+      separators: [",", " "],
+      normalize: (value) => value.trim().toLowerCase(),
+      validate: (value) => EMAIL.test(value) ? null : `\u201C${value}\u201D is not an e-mail address.`,
+      labels: { create: (value) => `Invite ${value}` }
+    }
+  );
+}
+export {
+  TagInputRecipients as default
+};

package/registry/examples/tag-input/recipients.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { TagInput } from "@krizaka/ui/tag-input";
+
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+// Paste “a@x.com, b@y.org” and both are added; what is not an address is refused, with the reason.
+export default function TagInputRecipients() {
+  return (
+    <TagInput
+      label="Invite by e-mail"
+      placeholder="name@example.com"
+      defaultValue={["ines@krizaka.com"]}
+      separators={[",", " "]}
+      normalize={(value) => value.trim().toLowerCase()}
+      validate={(value) => (EMAIL.test(value) ? null : `“${value}” is not an e-mail address.`)}
+      labels={{ create: (value) => `Invite ${value}` }}
+    />
+  );
+}

package/registry/examples/tag-input/video-tags.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/tag-input/video-tags.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/tag-input/video-tags.tsx
+import { TagInput } from "@krizaka/ui/tag-input";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function TagInputVideoTags() {
+  const [tags, setTags] = React.useState(["montreal", "sunset"]);
+  return /* @__PURE__ */ jsx(
+    TagInput,
+    {
+      label: "Tags",
+      placeholder: "Add a tag",
+      value: tags,
+      onValueChange: setTags,
+      suggestions: ["timelapse", "travel", "skyline", "golden hour", "drone"],
+      normalize: (tag) => tag.trim().toLowerCase().replace(/^#/, ""),
+      max: 10,
+      hint: "Up to 10 tags, separated by commas.",
+      labels: { create: (tag) => `Add \u201C${tag}\u201D`, remove: (tag) => `Remove ${tag}` }
+    }
+  );
+}
+export {
+  TagInputVideoTags as default
+};

package/registry/examples/tag-input/video-tags.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { TagInput } from "@krizaka/ui/tag-input";
+import * as React from "react";
+
+// Lower case, no “#”: “#Sunset” and “sunset” are one tag.
+export default function TagInputVideoTags() {
+  const [tags, setTags] = React.useState(["montreal", "sunset"]);
+  return (
+    <TagInput
+      label="Tags"
+      placeholder="Add a tag"
+      value={tags}
+      onValueChange={setTags}
+      suggestions={["timelapse", "travel", "skyline", "golden hour", "drone"]}
+      normalize={(tag) => tag.trim().toLowerCase().replace(/^#/, "")}
+      max={10}
+      hint="Up to 10 tags, separated by commas."
+      labels={{ create: (tag) => `Add “${tag}”`, remove: (tag) => `Remove ${tag}` }}
+    />
+  );
+}

package/registry/examples/video-player/default.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/video-player/default.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/video-player/default.tsx
+import { VideoPlayer } from "@krizaka/ui/video-player";
+import { jsx } from "react/jsx-runtime";
+var TOUR = "https://www.krizaka.com/assets/orochia/tour";
+function VideoPlayerDefault() {
+  return /* @__PURE__ */ jsx(VideoPlayer, { title: "Video: an auction on Orochia", src: `${TOUR}/alex-bid.mp4`, poster: `${TOUR}/alex-bid.jpg` });
+}
+export {
+  VideoPlayerDefault as default
+};

package/registry/examples/video-player/default.tsx

@@ -0,0 +1,8 @@
+import { VideoPlayer } from "@krizaka/ui/video-player";
+
+const TOUR = "https://www.krizaka.com/assets/orochia/tour";
+
+// For HLS, add `loadHls={() => import("hls.js")}`: only browsers without native HLS download it.
+export default function VideoPlayerDefault() {
+  return <VideoPlayer title="Video: an auction on Orochia" src={`${TOUR}/alex-bid.mp4`} poster={`${TOUR}/alex-bid.jpg`} />;
+}

package/registry/examples/video-player/gated.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/video-player/gated.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/video-player/gated.tsx
+import { Button } from "@krizaka/ui/button";
+import { VideoPlayer } from "@krizaka/ui/video-player";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TOUR = "https://www.krizaka.com/assets/orochia/tour";
+function VideoPlayerGated() {
+  return /* @__PURE__ */ jsx(
+    VideoPlayer,
+    {
+      title: "Video: unlocked for supporters",
+      src: `${TOUR}/alex-unlock.mp4`,
+      poster: `${TOUR}/alex-unlock.jpg`,
+      preload: "none",
+      overlay: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 bg-scrim-strong p-6 text-center backdrop-blur-md", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-fg-on-media", children: "Supporters only" }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-xs text-sm text-fg-on-media", children: "Unlock this video with a tip of $5 or more." }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", children: "Unlock for $5" })
+      ] })
+    }
+  );
+}
+export {
+  VideoPlayerGated as default
+};

package/registry/examples/video-player/gated.tsx

@@ -0,0 +1,23 @@
+import { Button } from "@krizaka/ui/button";
+import { VideoPlayer } from "@krizaka/ui/video-player";
+
+const TOUR = "https://www.krizaka.com/assets/orochia/tour";
+
+// The app draws its gate over the video; the controls step aside until it opens.
+export default function VideoPlayerGated() {
+  return (
+    <VideoPlayer
+      title="Video: unlocked for supporters"
+      src={`${TOUR}/alex-unlock.mp4`}
+      poster={`${TOUR}/alex-unlock.jpg`}
+      preload="none"
+      overlay={
+        <div className="flex h-full flex-col items-center justify-center gap-3 bg-scrim-strong p-6 text-center backdrop-blur-md">
+          <p className="text-base font-semibold text-fg-on-media">Supporters only</p>
+          <p className="max-w-xs text-sm text-fg-on-media">Unlock this video with a tip of $5 or more.</p>
+          <Button variant="primary">Unlock for $5</Button>
+        </div>
+      }
+    />
+  );
+}

package/registry/examples/video-player/native/default.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/video-player/native/default.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/video-player/native/default.tsx
+import { VideoPlayer } from "@krizaka/ui/native/video-player";
+import { jsx } from "react/jsx-runtime";
+function NativeVideoPlayerDefault() {
+  return /* @__PURE__ */ jsx(
+    VideoPlayer,
+    {
+      title: "Video: an auction on Orochia",
+      source: { uri: "https://www.krizaka.com/assets/orochia/tour/alex-bid.mp4" },
+      poster: { uri: "https://www.krizaka.com/assets/orochia/tour/alex-bid.jpg" }
+    }
+  );
+}
+export {
+  NativeVideoPlayerDefault as default
+};

package/registry/examples/video-player/native/default.tsx

@@ -0,0 +1,12 @@
+import { VideoPlayer } from "@krizaka/ui/native/video-player";
+
+// expo-video plays HLS natively on iOS and Android; the poster stays until the first frame.
+export default function NativeVideoPlayerDefault() {
+  return (
+    <VideoPlayer
+      title="Video: an auction on Orochia"
+      source={{ uri: "https://www.krizaka.com/assets/orochia/tour/alex-bid.mp4" }}
+      poster={{ uri: "https://www.krizaka.com/assets/orochia/tour/alex-bid.jpg" }}
+    />
+  );
+}

package/registry/examples/video-player/signed-source.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/video-player/signed-source.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/video-player/signed-source.tsx
+import { VideoPlayer } from "@krizaka/ui/video-player";
+import { jsx } from "react/jsx-runtime";
+var TOUR = "https://www.krizaka.com/assets/orochia/tour";
+async function signedAddress() {
+  await new Promise((resolve) => setTimeout(resolve, 200));
+  return `${TOUR}/elena-publish.mp4?token=demo&expires=300`;
+}
+function VideoPlayerSignedSource() {
+  return /* @__PURE__ */ jsx(VideoPlayer, { title: "Video: the creator studio", src: signedAddress, preload: "none", poster: `${TOUR}/elena-publish.jpg` });
+}
+export {
+  VideoPlayerSignedSource as default
+};

package/registry/examples/video-player/signed-source.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { VideoPlayer } from "@krizaka/ui/video-player";
+
+const TOUR = "https://www.krizaka.com/assets/orochia/tour";
+
+// Your server signs a short-lived address for this viewer; it is asked on the first play, and again after an error.
+async function signedAddress() {
+  await new Promise((resolve) => setTimeout(resolve, 200));
+  return `${TOUR}/elena-publish.mp4?token=demo&expires=300`;
+}
+
+export default function VideoPlayerSignedSource() {
+  return <VideoPlayer title="Video: the creator studio" src={signedAddress} preload="none" poster={`${TOUR}/elena-publish.jpg`} />;
+}

package/registry/examples/video-player/vertical.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;