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

package/dist/kernel/components/blocks/sidebar-node.cjs

@@ -0,0 +1,309 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/blocks/sidebar-node.tsx
+var sidebar_node_exports = {};
+__export(sidebar_node_exports, {
+  SidebarNode: () => SidebarNode
+});
+module.exports = __toCommonJS(sidebar_node_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/blocks/sidebar-node.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_lucide_react = require("lucide-react");
+var import_link = __toESM(require("next/link"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var SIDEBAR_NODE_VARIANT = "base";
+var depthClassByDepth = {
+  0: "pl-2",
+  1: "pl-5",
+  2: "pl-8",
+  3: "pl-11",
+  4: "pl-14",
+  5: "pl-[68px]",
+  6: "pl-20",
+  7: "pl-[92px]",
+  8: "pl-[104px]",
+  9: "pl-[116px]",
+  10: "pl-32",
+  11: "pl-[140px]",
+  12: "pl-[152px]"
+};
+var sidebarSectionVariants = (0, import_class_variance_authority.cva)(
+  "mb-2 mt-6 flex min-h-5 items-center gap-2 pr-2 text-[11px] font-semibold uppercase leading-4 tracking-wide text-foreground-3 first:mt-0",
+  {
+    variants: {
+      variant: {
+        base: "",
+        minimal: "text-foreground-3"
+      }
+    }
+  }
+);
+var sidebarNodeVariants = (0, import_class_variance_authority.cva)(
+  [
+    "group/sidebar-row relative flex min-h-8 w-full min-w-0 items-center gap-2 rounded-button py-1.5 pr-2 text-left text-[13px] leading-5",
+    "transition-[background-color,color,box-shadow] duration-200 ease-out"
+  ].join(" "),
+  {
+    variants: {
+      interactive: {
+        false: "",
+        true: "cursor-pointer"
+      },
+      variant: {
+        base: [
+          "font-normal text-foreground-2 hover:bg-surface-hover hover:text-foreground-1",
+          "data-[state=child-path-active]:bg-surface-2 data-[state=child-path-active]:font-medium data-[state=child-path-active]:text-foreground-1",
+          "data-[state=path-active]:bg-surface-active data-[state=path-active]:font-medium data-[state=path-active]:text-foreground-1 data-[state=path-active]:shadow-xs"
+        ].join(" "),
+        minimal: [
+          "font-normal text-foreground-2 hover:text-foreground-1 hover:opacity-90",
+          "data-[state=child-path-active]:font-medium data-[state=child-path-active]:text-foreground-1",
+          "data-[state=path-active]:font-semibold data-[state=path-active]:text-foreground-1 data-[state=path-active]:[text-shadow:0_0_0_currentColor]"
+        ].join(" ")
+      }
+    },
+    defaultVariants: {
+      interactive: false,
+      variant: "base"
+    }
+  }
+);
+function isExternalHref(href) {
+  return /^[a-z][a-z0-9+.-]*:/i.test(href) && !href.startsWith("mailto:") && !href.startsWith("tel:") || href.startsWith("//");
+}
+function mergeRel(rel) {
+  const values = new Set((rel ?? "").split(/\s+/).filter(Boolean));
+  values.add("noopener");
+  values.add("noreferrer");
+  return Array.from(values).join(" ");
+}
+function Caret({ active, expanded }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "ml-auto flex size-5 shrink-0 items-center justify-center rounded-button text-[11px] leading-none text-foreground-3 transition-colors",
+        active && "text-foreground-1"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          className: cn(
+            "block transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]",
+            expanded ? "rotate-90" : "rotate-0"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronRight, { "aria-hidden": "true", size: 13 })
+        }
+      )
+    }
+  );
+}
+function RowInner({
+  activeState,
+  activeItemRef,
+  children,
+  depth,
+  interactive
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: cn(
+        sidebarNodeVariants({
+          interactive,
+          variant: SIDEBAR_NODE_VARIANT
+        }),
+        depthClassByDepth[depth]
+      ),
+      "data-active": activeState ? "true" : void 0,
+      "data-state": activeState,
+      ref: activeItemRef,
+      children
+    }
+  );
+}
+function RowText({ title }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "min-w-0 flex-1 whitespace-normal break-words text-pretty", children: title });
+}
+function ExternalLinkIndicator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "ml-auto flex size-5 shrink-0 items-center justify-center rounded-button text-[11px] leading-none text-foreground-3 transition-colors group-hover/sidebar-row:text-foreground-1",
+      children: "\u2197"
+    }
+  );
+}
+function SidebarLink({
+  active,
+  children,
+  className,
+  href,
+  onClick,
+  parentExpanded,
+  ...props
+}) {
+  const commonProps = {
+    "aria-current": active ? "page" : void 0,
+    className: cn(
+      "block rounded-button focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+      className
+    ),
+    onClick,
+    tabIndex: parentExpanded ? void 0 : -1,
+    ...props
+  };
+  if (isExternalHref(href)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href, rel: mergeRel(void 0), target: "_blank", ...commonProps, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href, ...commonProps, children });
+}
+function SidebarNode({
+  activeState,
+  activeItemRef,
+  children,
+  contentId,
+  depth,
+  expanded = false,
+  href,
+  isExpandable = false,
+  node,
+  onLinkClick,
+  onToggle,
+  parentExpanded,
+  title
+}) {
+  const isActive = activeState === "path-active";
+  const isChildActive = activeState === "child-path-active";
+  const active = isActive || isChildActive;
+  const isExternalLinkNode = node.type === "link" && href ? isExternalHref(href) : false;
+  if (node.type === "section") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: cn(
+            sidebarSectionVariants({ variant: SIDEBAR_NODE_VARIANT }),
+            depthClassByDepth[depth]
+          ),
+          children: title
+        }
+      ),
+      children
+    ] });
+  }
+  if (node.type === "folder") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "select-none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          "aria-controls": contentId,
+          "aria-expanded": expanded,
+          className: "block w-full rounded-button focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+          onClick: onToggle,
+          tabIndex: parentExpanded ? void 0 : -1,
+          type: "button",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            RowInner,
+            {
+              activeItemRef,
+              activeState,
+              depth,
+              interactive: true,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RowText, { title }),
+                isExpandable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Caret, { active, expanded }) : null
+              ]
+            }
+          )
+        }
+      ),
+      children
+    ] });
+  }
+  if (!href) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "select-none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SidebarLink,
+      {
+        active: isActive,
+        "aria-controls": isExpandable ? contentId : void 0,
+        "aria-expanded": isExpandable ? expanded : void 0,
+        href,
+        onClick: onLinkClick,
+        parentExpanded,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          RowInner,
+          {
+            activeItemRef,
+            activeState,
+            depth,
+            interactive: false,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RowText, { title }),
+              isExpandable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Caret, { active, expanded }) : null,
+              isExternalLinkNode ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExternalLinkIndicator, {}) : null
+            ]
+          }
+        )
+      }
+    ),
+    children
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SidebarNode
+});

package/dist/kernel/components/blocks/sidebar-node.d.cts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SidebarNodePrimitiveProps } from './sidebar.cjs';
+import '@publish.os/nextjs/types';
+import 'react';
+
+declare function SidebarNode({ activeState, activeItemRef, children, contentId, depth, expanded, href, isExpandable, node, onLinkClick, onToggle, parentExpanded, title, }: SidebarNodePrimitiveProps): react_jsx_runtime.JSX.Element | null;
+
+export { SidebarNode, SidebarNodePrimitiveProps };

package/dist/kernel/components/blocks/sidebar-node.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SidebarNodePrimitiveProps } from './sidebar.js';
+import '@publish.os/nextjs/types';
+import 'react';
+
+declare function SidebarNode({ activeState, activeItemRef, children, contentId, depth, expanded, href, isExpandable, node, onLinkClick, onToggle, parentExpanded, title, }: SidebarNodePrimitiveProps): react_jsx_runtime.JSX.Element | null;
+
+export { SidebarNode, SidebarNodePrimitiveProps };

package/dist/kernel/components/blocks/sidebar-node.js

@@ -0,0 +1,272 @@
+// 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/blocks/sidebar-node.tsx
+import { cva } from "class-variance-authority";
+import { ChevronRight } from "lucide-react";
+import NextLink from "next/link";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SIDEBAR_NODE_VARIANT = "base";
+var depthClassByDepth = {
+  0: "pl-2",
+  1: "pl-5",
+  2: "pl-8",
+  3: "pl-11",
+  4: "pl-14",
+  5: "pl-[68px]",
+  6: "pl-20",
+  7: "pl-[92px]",
+  8: "pl-[104px]",
+  9: "pl-[116px]",
+  10: "pl-32",
+  11: "pl-[140px]",
+  12: "pl-[152px]"
+};
+var sidebarSectionVariants = cva(
+  "mb-2 mt-6 flex min-h-5 items-center gap-2 pr-2 text-[11px] font-semibold uppercase leading-4 tracking-wide text-foreground-3 first:mt-0",
+  {
+    variants: {
+      variant: {
+        base: "",
+        minimal: "text-foreground-3"
+      }
+    }
+  }
+);
+var sidebarNodeVariants = cva(
+  [
+    "group/sidebar-row relative flex min-h-8 w-full min-w-0 items-center gap-2 rounded-button py-1.5 pr-2 text-left text-[13px] leading-5",
+    "transition-[background-color,color,box-shadow] duration-200 ease-out"
+  ].join(" "),
+  {
+    variants: {
+      interactive: {
+        false: "",
+        true: "cursor-pointer"
+      },
+      variant: {
+        base: [
+          "font-normal text-foreground-2 hover:bg-surface-hover hover:text-foreground-1",
+          "data-[state=child-path-active]:bg-surface-2 data-[state=child-path-active]:font-medium data-[state=child-path-active]:text-foreground-1",
+          "data-[state=path-active]:bg-surface-active data-[state=path-active]:font-medium data-[state=path-active]:text-foreground-1 data-[state=path-active]:shadow-xs"
+        ].join(" "),
+        minimal: [
+          "font-normal text-foreground-2 hover:text-foreground-1 hover:opacity-90",
+          "data-[state=child-path-active]:font-medium data-[state=child-path-active]:text-foreground-1",
+          "data-[state=path-active]:font-semibold data-[state=path-active]:text-foreground-1 data-[state=path-active]:[text-shadow:0_0_0_currentColor]"
+        ].join(" ")
+      }
+    },
+    defaultVariants: {
+      interactive: false,
+      variant: "base"
+    }
+  }
+);
+function isExternalHref(href) {
+  return /^[a-z][a-z0-9+.-]*:/i.test(href) && !href.startsWith("mailto:") && !href.startsWith("tel:") || href.startsWith("//");
+}
+function mergeRel(rel) {
+  const values = new Set((rel ?? "").split(/\s+/).filter(Boolean));
+  values.add("noopener");
+  values.add("noreferrer");
+  return Array.from(values).join(" ");
+}
+function Caret({ active, expanded }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "ml-auto flex size-5 shrink-0 items-center justify-center rounded-button text-[11px] leading-none text-foreground-3 transition-colors",
+        active && "text-foreground-1"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "block transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]",
+            expanded ? "rotate-90" : "rotate-0"
+          ),
+          children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", size: 13 })
+        }
+      )
+    }
+  );
+}
+function RowInner({
+  activeState,
+  activeItemRef,
+  children,
+  depth,
+  interactive
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        sidebarNodeVariants({
+          interactive,
+          variant: SIDEBAR_NODE_VARIANT
+        }),
+        depthClassByDepth[depth]
+      ),
+      "data-active": activeState ? "true" : void 0,
+      "data-state": activeState,
+      ref: activeItemRef,
+      children
+    }
+  );
+}
+function RowText({ title }) {
+  return /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 whitespace-normal break-words text-pretty", children: title });
+}
+function ExternalLinkIndicator() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "ml-auto flex size-5 shrink-0 items-center justify-center rounded-button text-[11px] leading-none text-foreground-3 transition-colors group-hover/sidebar-row:text-foreground-1",
+      children: "\u2197"
+    }
+  );
+}
+function SidebarLink({
+  active,
+  children,
+  className,
+  href,
+  onClick,
+  parentExpanded,
+  ...props
+}) {
+  const commonProps = {
+    "aria-current": active ? "page" : void 0,
+    className: cn(
+      "block rounded-button focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+      className
+    ),
+    onClick,
+    tabIndex: parentExpanded ? void 0 : -1,
+    ...props
+  };
+  if (isExternalHref(href)) {
+    return /* @__PURE__ */ jsx("a", { href, rel: mergeRel(void 0), target: "_blank", ...commonProps, children });
+  }
+  return /* @__PURE__ */ jsx(NextLink, { href, ...commonProps, children });
+}
+function SidebarNode({
+  activeState,
+  activeItemRef,
+  children,
+  contentId,
+  depth,
+  expanded = false,
+  href,
+  isExpandable = false,
+  node,
+  onLinkClick,
+  onToggle,
+  parentExpanded,
+  title
+}) {
+  const isActive = activeState === "path-active";
+  const isChildActive = activeState === "child-path-active";
+  const active = isActive || isChildActive;
+  const isExternalLinkNode = node.type === "link" && href ? isExternalHref(href) : false;
+  if (node.type === "section") {
+    return /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            sidebarSectionVariants({ variant: SIDEBAR_NODE_VARIANT }),
+            depthClassByDepth[depth]
+          ),
+          children: title
+        }
+      ),
+      children
+    ] });
+  }
+  if (node.type === "folder") {
+    return /* @__PURE__ */ jsxs("li", { className: "select-none", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-controls": contentId,
+          "aria-expanded": expanded,
+          className: "block w-full rounded-button focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+          onClick: onToggle,
+          tabIndex: parentExpanded ? void 0 : -1,
+          type: "button",
+          children: /* @__PURE__ */ jsxs(
+            RowInner,
+            {
+              activeItemRef,
+              activeState,
+              depth,
+              interactive: true,
+              children: [
+                /* @__PURE__ */ jsx(RowText, { title }),
+                isExpandable ? /* @__PURE__ */ jsx(Caret, { active, expanded }) : null
+              ]
+            }
+          )
+        }
+      ),
+      children
+    ] });
+  }
+  if (!href) return null;
+  return /* @__PURE__ */ jsxs("li", { className: "select-none", children: [
+    /* @__PURE__ */ jsx(
+      SidebarLink,
+      {
+        active: isActive,
+        "aria-controls": isExpandable ? contentId : void 0,
+        "aria-expanded": isExpandable ? expanded : void 0,
+        href,
+        onClick: onLinkClick,
+        parentExpanded,
+        children: /* @__PURE__ */ jsxs(
+          RowInner,
+          {
+            activeItemRef,
+            activeState,
+            depth,
+            interactive: false,
+            children: [
+              /* @__PURE__ */ jsx(RowText, { title }),
+              isExpandable ? /* @__PURE__ */ jsx(Caret, { active, expanded }) : null,
+              isExternalLinkNode ? /* @__PURE__ */ jsx(ExternalLinkIndicator, {}) : null
+            ]
+          }
+        )
+      }
+    ),
+    children
+  ] });
+}
+export {
+  SidebarNode
+};