@publish.os/nextjs 0.0.1-alpha.2 → 0.0.1-alpha.4

package/dist/kernel/components/mdx/components/task-list.cjs

@@ -0,0 +1,88 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/mdx/components/task-list.tsx
+var task_list_exports = {};
+__export(task_list_exports, {
+  TaskList: () => TaskList,
+  TaskListInput: () => TaskListInput
+});
+module.exports = __toCommonJS(task_list_exports);
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/kernel/components/mdx/components/task-list.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function TaskList({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "ul",
+    {
+      className: cn(
+        "my-5 space-y-2 pl-6 text-base leading-7 text-foreground-2 [&>li]:pl-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TaskListInput({
+  checked,
+  className,
+  type
+}) {
+  if (type !== "checkbox") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "mr-2 inline-flex size-4 translate-y-0.5 items-center justify-center rounded-checkbox border border-stroke-2 bg-surface-1",
+        checked && "border-accent-solid bg-accent-solid text-accent-foreground",
+        className
+      ),
+      "data-checked": checked ? "" : void 0,
+      children: checked ? "x" : null
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TaskList,
+  TaskListInput
+});

package/dist/kernel/components/mdx/components/task-list.d.cts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type TaskListProps = React.ComponentPropsWithoutRef<"ul">;
+type TaskListInputProps = React.ComponentPropsWithoutRef<"input">;
+declare function TaskList({ className, ...props }: TaskListProps): react_jsx_runtime.JSX.Element;
+declare function TaskListInput({ checked, className, type, }: TaskListInputProps): react_jsx_runtime.JSX.Element | null;
+
+export { TaskList, TaskListInput, type TaskListInputProps, type TaskListProps };

package/dist/kernel/components/mdx/components/task-list.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type TaskListProps = React.ComponentPropsWithoutRef<"ul">;
+type TaskListInputProps = React.ComponentPropsWithoutRef<"input">;
+declare function TaskList({ className, ...props }: TaskListProps): react_jsx_runtime.JSX.Element;
+declare function TaskListInput({ checked, className, type, }: TaskListInputProps): react_jsx_runtime.JSX.Element | null;
+
+export { TaskList, TaskListInput, type TaskListInputProps, type TaskListProps };

package/dist/kernel/components/mdx/components/task-list.js

@@ -0,0 +1,60 @@
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/kernel/components/mdx/components/task-list.tsx
+import { jsx } from "react/jsx-runtime";
+function TaskList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cn(
+        "my-5 space-y-2 pl-6 text-base leading-7 text-foreground-2 [&>li]:pl-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TaskListInput({
+  checked,
+  className,
+  type
+}) {
+  if (type !== "checkbox") return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "mr-2 inline-flex size-4 translate-y-0.5 items-center justify-center rounded-checkbox border border-stroke-2 bg-surface-1",
+        checked && "border-accent-solid bg-accent-solid text-accent-foreground",
+        className
+      ),
+      "data-checked": checked ? "" : void 0,
+      children: checked ? "x" : null
+    }
+  );
+}
+export {
+  TaskList,
+  TaskListInput
+};

package/dist/kernel/components/mdx/components/video-player.cjs

@@ -0,0 +1,173 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/mdx/components/video-player.tsx
+var video_player_exports = {};
+__export(video_player_exports, {
+  VideoPlayer: () => VideoPlayer
+});
+module.exports = __toCommonJS(video_player_exports);
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/kernel/components/mdx/components/video-player.tsx
+var import_navigation = require("next/navigation");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var VIDEO_PLAY_EVENT = "publishos:video-play";
+function VideoPlayer({
+  className,
+  embed,
+  height,
+  poster,
+  src,
+  title,
+  width
+}) {
+  const instanceId = (0, import_react.useId)();
+  const pathname = (0, import_navigation.usePathname)();
+  const [playing, setPlaying] = (0, import_react.useState)(false);
+  const aspectRatio = width && height ? `${width} / ${height}` : "16 / 9";
+  const mediaKey = embed?.src ?? src;
+  const shellStyle = poster ? {
+    aspectRatio,
+    backgroundImage: `url("${poster}")`,
+    backgroundPosition: "center",
+    backgroundSize: "cover"
+  } : { aspectRatio };
+  const buttonStyle = {
+    ...shellStyle,
+    appearance: "none",
+    border: 0,
+    borderRadius: "inherit",
+    padding: 0
+  };
+  (0, import_react.useEffect)(() => {
+    if (mediaKey || pathname) {
+      setPlaying(false);
+    }
+  }, [mediaKey, pathname]);
+  (0, import_react.useEffect)(() => {
+    function handlePlay(event) {
+      const detail = event.detail;
+      if (detail?.id !== instanceId) {
+        setPlaying(false);
+      }
+    }
+    window.addEventListener(VIDEO_PLAY_EVENT, handlePlay);
+    return () => window.removeEventListener(VIDEO_PLAY_EVENT, handlePlay);
+  }, [instanceId]);
+  const startPlaying = (0, import_react.useCallback)(() => {
+    window.dispatchEvent(
+      new CustomEvent(VIDEO_PLAY_EVENT, { detail: { id: instanceId } })
+    );
+    setPlaying(true);
+  }, [instanceId]);
+  if (playing) {
+    if (embed) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "iframe",
+        {
+          allow: embed.allow,
+          allowFullScreen: true,
+          className: cn("block h-full w-full border-0 bg-black", className),
+          referrerPolicy: "strict-origin-when-cross-origin",
+          sandbox: "allow-scripts allow-same-origin allow-presentation allow-popups",
+          src: embed.src,
+          title: embed.title
+        },
+        embed.src
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "video",
+      {
+        autoPlay: true,
+        className: cn("block h-full w-full border-0 bg-black", className),
+        controls: true,
+        playsInline: true,
+        poster,
+        preload: "metadata",
+        src,
+        title,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("track", { kind: "captions" })
+      },
+      src
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      "aria-label": `Play video: ${title}`,
+      className: cn(
+        "group relative block h-full w-full appearance-none overflow-hidden border-0 bg-surface-3 p-0 text-foreground-1 outline-none",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-8",
+        className
+      ),
+      onClick: startPlaying,
+      style: buttonStyle,
+      type: "button",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: cn(!poster && "absolute inset-0 bg-surface-3"),
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "absolute inset-0 transition-colors duration-200",
+              poster ? "bg-black/20 group-hover:bg-black/30" : "bg-[radial-gradient(circle_at_center,_rgb(255_255_255_/_8%),_transparent_45%)]"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: "absolute inset-0 grid place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex size-14 items-center justify-center rounded-full border border-white/40 bg-black/70 text-white shadow-lg transition-transform duration-200 group-hover:scale-105", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-1 block h-0 w-0 border-y-[9px] border-y-transparent border-l-[14px] border-l-current" }) }) })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VideoPlayer
+});

package/dist/kernel/components/mdx/components/video-player.d.cts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type VideoEmbed = {
+    allow: string;
+    src: string;
+    title: string;
+};
+declare function VideoPlayer({ className, embed, height, poster, src, title, width, }: {
+    className?: string;
+    embed?: VideoEmbed;
+    height?: number;
+    poster?: string;
+    src: string;
+    title: string;
+    width?: number;
+}): react_jsx_runtime.JSX.Element;
+
+export { type VideoEmbed, VideoPlayer };

package/dist/kernel/components/mdx/components/video-player.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type VideoEmbed = {
+    allow: string;
+    src: string;
+    title: string;
+};
+declare function VideoPlayer({ className, embed, height, poster, src, title, width, }: {
+    className?: string;
+    embed?: VideoEmbed;
+    height?: number;
+    poster?: string;
+    src: string;
+    title: string;
+    width?: number;
+}): react_jsx_runtime.JSX.Element;
+
+export { type VideoEmbed, VideoPlayer };

package/dist/kernel/components/mdx/components/video-player.js

@@ -0,0 +1,147 @@
+"use client";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/kernel/components/mdx/components/video-player.tsx
+import { usePathname } from "next/navigation";
+import { useCallback, useEffect, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VIDEO_PLAY_EVENT = "publishos:video-play";
+function VideoPlayer({
+  className,
+  embed,
+  height,
+  poster,
+  src,
+  title,
+  width
+}) {
+  const instanceId = useId();
+  const pathname = usePathname();
+  const [playing, setPlaying] = useState(false);
+  const aspectRatio = width && height ? `${width} / ${height}` : "16 / 9";
+  const mediaKey = embed?.src ?? src;
+  const shellStyle = poster ? {
+    aspectRatio,
+    backgroundImage: `url("${poster}")`,
+    backgroundPosition: "center",
+    backgroundSize: "cover"
+  } : { aspectRatio };
+  const buttonStyle = {
+    ...shellStyle,
+    appearance: "none",
+    border: 0,
+    borderRadius: "inherit",
+    padding: 0
+  };
+  useEffect(() => {
+    if (mediaKey || pathname) {
+      setPlaying(false);
+    }
+  }, [mediaKey, pathname]);
+  useEffect(() => {
+    function handlePlay(event) {
+      const detail = event.detail;
+      if (detail?.id !== instanceId) {
+        setPlaying(false);
+      }
+    }
+    window.addEventListener(VIDEO_PLAY_EVENT, handlePlay);
+    return () => window.removeEventListener(VIDEO_PLAY_EVENT, handlePlay);
+  }, [instanceId]);
+  const startPlaying = useCallback(() => {
+    window.dispatchEvent(
+      new CustomEvent(VIDEO_PLAY_EVENT, { detail: { id: instanceId } })
+    );
+    setPlaying(true);
+  }, [instanceId]);
+  if (playing) {
+    if (embed) {
+      return /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          allow: embed.allow,
+          allowFullScreen: true,
+          className: cn("block h-full w-full border-0 bg-black", className),
+          referrerPolicy: "strict-origin-when-cross-origin",
+          sandbox: "allow-scripts allow-same-origin allow-presentation allow-popups",
+          src: embed.src,
+          title: embed.title
+        },
+        embed.src
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "video",
+      {
+        autoPlay: true,
+        className: cn("block h-full w-full border-0 bg-black", className),
+        controls: true,
+        playsInline: true,
+        poster,
+        preload: "metadata",
+        src,
+        title,
+        children: /* @__PURE__ */ jsx("track", { kind: "captions" })
+      },
+      src
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-label": `Play video: ${title}`,
+      className: cn(
+        "group relative block h-full w-full appearance-none overflow-hidden border-0 bg-surface-3 p-0 text-foreground-1 outline-none",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-8",
+        className
+      ),
+      onClick: startPlaying,
+      style: buttonStyle,
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(!poster && "absolute inset-0 bg-surface-3"),
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "absolute inset-0 transition-colors duration-200",
+              poster ? "bg-black/20 group-hover:bg-black/30" : "bg-[radial-gradient(circle_at_center,_rgb(255_255_255_/_8%),_transparent_45%)]"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-0 grid place-items-center", children: /* @__PURE__ */ jsx("span", { className: "flex size-14 items-center justify-center rounded-full border border-white/40 bg-black/70 text-white shadow-lg transition-transform duration-200 group-hover:scale-105", children: /* @__PURE__ */ jsx("span", { className: "ml-1 block h-0 w-0 border-y-[9px] border-y-transparent border-l-[14px] border-l-current" }) }) })
+      ]
+    }
+  );
+}
+export {
+  VideoPlayer
+};