@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/rich-text/rich-text-editor.js

@@ -0,0 +1,364 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Bold, Heading2, Italic, Link2, List, ListOrdered, Underline, Unlink } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../utils/cn.js";
+import { htmlToText, isSafeUrl, sanitizeHtml } from "./sanitize.js";
+const richTextContentClass = "text-body text-ink [&_a]:text-accent-ink [&_a]:underline [&_blockquote]:border-line-strong [&_blockquote]:border-l-2 [&_blockquote]:pl-3 [&_blockquote]:text-ink-2 [&_h2]:font-semibold [&_h2]:text-card-title [&_h3]:font-semibold [&_h3]:text-row-title [&_li]:my-0.5 [&_ol]:list-decimal [&_ol]:pl-5 [&_p]:my-1 [&_ul]:list-disc [&_ul]:pl-5 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [overflow-wrap:anywhere]";
+const COMMANDS = {
+  bold: {
+    label: "Negrita",
+    shortcut: "Ctrl+B",
+    icon: /* @__PURE__ */ jsx(Bold, {}),
+    run: () => document.execCommand("bold"),
+    active: () => document.queryCommandState("bold")
+  },
+  italic: {
+    label: "Cursiva",
+    shortcut: "Ctrl+I",
+    icon: /* @__PURE__ */ jsx(Italic, {}),
+    run: () => document.execCommand("italic"),
+    active: () => document.queryCommandState("italic")
+  },
+  underline: {
+    label: "Subrayado",
+    shortcut: "Ctrl+U",
+    icon: /* @__PURE__ */ jsx(Underline, {}),
+    run: () => document.execCommand("underline"),
+    active: () => document.queryCommandState("underline")
+  },
+  h2: {
+    label: "T\xEDtulo",
+    icon: /* @__PURE__ */ jsx(Heading2, {}),
+    run: () => {
+      const inHeading = blockName() === "h2";
+      document.execCommand("formatBlock", false, inHeading ? "p" : "h2");
+    },
+    active: () => blockName() === "h2"
+  },
+  ul: {
+    label: "Lista con vi\xF1etas",
+    icon: /* @__PURE__ */ jsx(List, {}),
+    run: () => document.execCommand("insertUnorderedList"),
+    active: () => document.queryCommandState("insertUnorderedList")
+  },
+  ol: {
+    label: "Lista numerada",
+    icon: /* @__PURE__ */ jsx(ListOrdered, {}),
+    run: () => document.execCommand("insertOrderedList"),
+    active: () => document.queryCommandState("insertOrderedList")
+  }
+};
+const ORDER = ["bold", "italic", "underline", "h2", "ul", "ol"];
+function blockName() {
+  const value = document.queryCommandValue("formatBlock");
+  return String(value).toLowerCase().replace(/[<>]/g, "");
+}
+function selectionIn(root) {
+  const selection = window.getSelection();
+  if (!root || !selection || selection.rangeCount === 0) return null;
+  const range = selection.getRangeAt(0);
+  return root.contains(range.commonAncestorContainer) ? range : null;
+}
+function RichTextEditor({
+  value,
+  defaultValue = "",
+  onChange,
+  placeholder = "Escribe aqu\xED\u2026",
+  disabled,
+  minHeightRem = 8,
+  className,
+  ...aria
+}) {
+  const baseId = useId();
+  const editor = useRef(null);
+  const toolbar = useRef(null);
+  const linkInput = useRef(null);
+  const savedRange = useRef(null);
+  const lastEmitted = useRef("");
+  const [empty, setEmpty] = useState(() => htmlToText(sanitizeHtml(value ?? defaultValue)) === "");
+  const [active, setActive] = useState(/* @__PURE__ */ new Set());
+  const [focusIndex, setFocusIndex] = useState(0);
+  const [linkOpen, setLinkOpen] = useState(false);
+  const [linkValue, setLinkValue] = useState("");
+  const [linkError, setLinkError] = useState(false);
+  useLayoutEffect(() => {
+    const node = editor.current;
+    if (!node) return;
+    const clean = sanitizeHtml(value ?? defaultValue);
+    if (value === void 0 || clean !== lastEmitted.current) {
+      if (node.innerHTML !== clean) node.innerHTML = clean;
+      lastEmitted.current = clean;
+      setEmpty(htmlToText(clean) === "");
+    }
+  }, [value]);
+  const refreshActive = useCallback(() => {
+    if (!selectionIn(editor.current)) return;
+    const next = /* @__PURE__ */ new Set();
+    for (const key of ORDER) if (COMMANDS[key].active()) next.add(key);
+    setActive(next);
+  }, []);
+  useEffect(() => {
+    document.addEventListener("selectionchange", refreshActive);
+    return () => document.removeEventListener("selectionchange", refreshActive);
+  }, [refreshActive]);
+  const emit = useCallback(() => {
+    const node = editor.current;
+    if (!node) return;
+    const clean = sanitizeHtml(node.innerHTML);
+    const isEmpty = htmlToText(clean) === "";
+    setEmpty(isEmpty);
+    const out = isEmpty ? "" : clean;
+    if (out !== lastEmitted.current) {
+      lastEmitted.current = out;
+      onChange?.(out);
+    }
+  }, [onChange]);
+  const exec = (key) => {
+    editor.current?.focus();
+    COMMANDS[key].run();
+    emit();
+    refreshActive();
+  };
+  const openLink = () => {
+    const range = selectionIn(editor.current);
+    savedRange.current = range ? range.cloneRange() : null;
+    const anchor = range?.commonAncestorContainer instanceof Element ? range.commonAncestorContainer.closest("a") : range?.commonAncestorContainer.parentElement?.closest("a");
+    setLinkValue(anchor?.getAttribute("href") ?? "https://");
+    setLinkError(false);
+    setLinkOpen(true);
+    queueMicrotask(() => linkInput.current?.select());
+  };
+  const restoreSelection = () => {
+    editor.current?.focus();
+    const range = savedRange.current;
+    const selection = window.getSelection();
+    if (range && selection) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+  };
+  const closeLink = () => {
+    setLinkOpen(false);
+    restoreSelection();
+  };
+  const applyLink = () => {
+    const href = linkValue.trim();
+    if (!isSafeUrl(href)) {
+      setLinkError(true);
+      return;
+    }
+    restoreSelection();
+    const selection = window.getSelection();
+    if (selection?.isCollapsed) {
+      document.execCommand("insertHTML", false, sanitizeHtml(`<a href="${href}">${href}</a>`));
+    } else {
+      document.execCommand("createLink", false, href);
+    }
+    setLinkOpen(false);
+    emit();
+  };
+  const removeLink = () => {
+    restoreSelection();
+    document.execCommand("unlink");
+    setLinkOpen(false);
+    emit();
+  };
+  const onEditorKeyDown = (event) => {
+    if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "k") {
+      event.preventDefault();
+      openLink();
+    }
+  };
+  const onPaste = (event) => {
+    event.preventDefault();
+    const html = event.clipboardData.getData("text/html");
+    const text = event.clipboardData.getData("text/plain");
+    const clean = html ? sanitizeHtml(html) : sanitizeHtml(
+      text.split(/\r?\n/).map((line) => `<p>${line.replace(/&/g, "&amp;").replace(/</g, "&lt;")}</p>`).join("")
+    );
+    document.execCommand("insertHTML", false, clean);
+    emit();
+  };
+  const onToolbarKeyDown = (event) => {
+    const buttons = Array.from(
+      toolbar.current?.querySelectorAll("button[data-tool]") ?? []
+    );
+    const at = buttons.indexOf(document.activeElement);
+    if (at === -1) return;
+    let next = at;
+    if (event.key === "ArrowRight") next = (at + 1) % buttons.length;
+    else if (event.key === "ArrowLeft") next = (at - 1 + buttons.length) % buttons.length;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = buttons.length - 1;
+    else return;
+    event.preventDefault();
+    setFocusIndex(next);
+    buttons[next]?.focus();
+  };
+  const tools = ORDER.map((key) => {
+    const command = COMMANDS[key];
+    return {
+      id: key,
+      label: command.shortcut ? `${command.label} (${command.shortcut})` : command.label,
+      icon: command.icon,
+      pressed: active.has(key),
+      run: () => exec(key)
+    };
+  });
+  tools.push({
+    id: "link",
+    label: "Enlace (Ctrl+K)",
+    icon: /* @__PURE__ */ jsx(Link2, {}),
+    pressed: linkOpen,
+    run: openLink
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "@container/rte flex w-full min-w-0 flex-col overflow-hidden rounded-input border-control bg-surface-control focus-within:outline-2 focus-within:outline-accent-ink focus-within:-outline-offset-1",
+        disabled && "opacity-60",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: toolbar,
+            role: "toolbar",
+            "aria-label": "Formato",
+            "aria-controls": `${baseId}-editor`,
+            onKeyDown: onToolbarKeyDown,
+            className: "flex flex-wrap items-center gap-0.5 border-b-divider p-1",
+            children: [
+              tools.map((tool, index) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-tool": tool.id,
+                  title: tool.label,
+                  "aria-label": tool.label,
+                  "aria-pressed": tool.pressed,
+                  disabled,
+                  tabIndex: index === focusIndex ? 0 : -1,
+                  onFocus: () => setFocusIndex(index),
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: tool.run,
+                  className: "pressable grid size-8 place-items-center rounded-button text-ink-2 hover:bg-surface-sunken hover:text-ink focus-visible:focus-ring disabled:cursor-not-allowed aria-pressed:bg-accent-soft aria-pressed:text-accent-ink [&_svg]:size-4",
+                  children: tool.icon
+                },
+                tool.id
+              )),
+              linkOpen ? /* @__PURE__ */ jsxs(
+                "form",
+                {
+                  className: "flex min-w-0 basis-full items-center gap-1 pt-1 @md/rte:basis-auto @md/rte:flex-1 @md/rte:pt-0",
+                  onSubmit: (event) => {
+                    event.preventDefault();
+                    applyLink();
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: linkInput,
+                        type: "url",
+                        value: linkValue,
+                        "aria-label": "Direcci\xF3n del enlace",
+                        "aria-invalid": linkError || void 0,
+                        onChange: (event) => {
+                          setLinkValue(event.target.value);
+                          setLinkError(false);
+                        },
+                        onKeyDown: (event) => {
+                          if (event.key === "Escape") {
+                            event.preventDefault();
+                            closeLink();
+                          }
+                        },
+                        className: "h-control-sm min-w-0 flex-1 rounded-input border-control bg-surface-control px-2 text-control text-ink focus:border-transparent focus:outline-2 focus:outline-accent-ink focus:-outline-offset-1 aria-[invalid=true]:border-danger"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "submit",
+                        className: "h-control-sm rounded-button bg-accent px-2.5 font-semibold text-control text-on-accent focus-visible:focus-ring",
+                        children: "Aplicar"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        title: "Quitar enlace",
+                        "aria-label": "Quitar enlace",
+                        onClick: removeLink,
+                        className: "grid size-8 place-items-center rounded-button text-ink-2 hover:bg-surface-sunken focus-visible:focus-ring [&_svg]:size-4",
+                        children: /* @__PURE__ */ jsx(Unlink, {})
+                      }
+                    )
+                  ]
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          empty ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute top-0 left-0 px-3 py-2 text-body text-ink-3",
+              children: placeholder
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: editor,
+              id: `${baseId}-editor`,
+              role: "textbox",
+              "aria-multiline": "true",
+              "aria-label": aria["aria-label"],
+              "aria-labelledby": aria["aria-labelledby"],
+              "aria-disabled": disabled || void 0,
+              contentEditable: !disabled,
+              suppressContentEditableWarning: true,
+              tabIndex: disabled ? -1 : 0,
+              spellCheck: true,
+              onInput: emit,
+              onPaste,
+              onKeyDown: onEditorKeyDown,
+              onBlur: emit,
+              style: { minHeight: `${minHeightRem}rem` },
+              className: cn("w-full px-3 py-2 outline-none", richTextContentClass)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function RichTextView({ html, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(richTextContentClass, className),
+      dangerouslySetInnerHTML: { __html: sanitizeHtml(html) }
+    }
+  );
+}
+export {
+  RichTextEditor,
+  RichTextView,
+  richTextContentClass
+};

package/dist/rich-text/sanitize.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Allowlist HTML sanitizer for the rich text editor. It is a small string tokenizer with no DOM
+ * dependency, so it runs the same on the server, in the browser and in tests.
+ *
+ * Rules:
+ * - Only the tags in `ALLOWED_TAGS` survive, and only without attributes, except `<a href>`.
+ * - Unknown tags are unwrapped (their text stays); `DROP_WITH_CONTENT` tags lose their content too.
+ * - `href` must be http(s), mailto, tel, or a relative/fragment link. Everything else
+ *   (javascript:, data:, vbscript:, ...) is removed after entity decoding and control-char stripping.
+ * - Output is rebuilt from tokens, always re-escaped and always balanced.
+ */
+/** True for http(s), mailto, tel and scheme-less (relative or fragment) URLs. */
+export declare function isSafeUrl(raw: string): boolean;
+/** Returns safe, balanced HTML containing only the editor's vocabulary. */
+export declare function sanitizeHtml(input: string): string;
+/** Plain text of sanitized HTML, used to detect an empty editor. */
+export declare function htmlToText(html: string): string;

package/dist/rich-text/sanitize.js

@@ -0,0 +1,215 @@
+const ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "p",
+  "br",
+  "strong",
+  "em",
+  "u",
+  "s",
+  "ul",
+  "ol",
+  "li",
+  "a",
+  "h2",
+  "h3",
+  "blockquote"
+]);
+const TAG_ALIASES = {
+  b: "strong",
+  i: "em",
+  strike: "s",
+  del: "s",
+  h1: "h2",
+  h4: "h3",
+  h5: "h3",
+  h6: "h3",
+  div: "p"
+};
+const DROP_WITH_CONTENT = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "iframe",
+  "object",
+  "embed",
+  "svg",
+  "math",
+  "template",
+  "noscript",
+  "textarea",
+  "select",
+  "title",
+  "head",
+  "frameset",
+  "applet",
+  "xmp",
+  "noembed",
+  "noframes",
+  "plaintext"
+]);
+const VOID_TAGS = /* @__PURE__ */ new Set(["br"]);
+const NAMED_ENTITIES = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  nbsp: "\xA0",
+  colon: ":",
+  tab: "	",
+  newline: "\n",
+  sol: "/"
+};
+function decodeEntities(text) {
+  return text.replace(/&(#x[0-9a-f]+|#\d+|[a-z][a-z0-9]*);?/gi, (match, body) => {
+    if (body[0] === "#") {
+      const code = body[1]?.toLowerCase() === "x" ? Number.parseInt(body.slice(2), 16) : Number(body.slice(1));
+      if (!Number.isFinite(code) || code <= 0 || code > 1114111) return "";
+      return String.fromCodePoint(code);
+    }
+    return NAMED_ENTITIES[body.toLowerCase()] ?? match;
+  });
+}
+function escapeText(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttribute(text) {
+  return escapeText(text).replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function isInvisible(code) {
+  return code <= 32 || code >= 127 && code <= 159 || code >= 8203 && code <= 8205 || code === 8232 || code === 8233 || code === 65279;
+}
+function isSafeUrl(raw) {
+  const url = Array.from(decodeEntities(raw)).filter((char) => !isInvisible(char.codePointAt(0) ?? 0)).join("");
+  if (url === "") return false;
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(url);
+  if (!scheme) return true;
+  return ["http", "https", "mailto", "tel"].includes((scheme[1] ?? "").toLowerCase());
+}
+function parseTag(html, start) {
+  const match = /^<(\/?)([a-zA-Z][a-zA-Z0-9:-]*)/.exec(html.slice(start, start + 64));
+  if (!match) return null;
+  let i = start + match[0].length;
+  const attributes = {};
+  const length = html.length;
+  while (i < length) {
+    while (i < length && /[\s/]/.test(html[i])) i++;
+    if (html[i] === ">")
+      return {
+        name: match[2].toLowerCase(),
+        closing: match[1] === "/",
+        attributes,
+        end: i + 1
+      };
+    const nameStart = i;
+    while (i < length && !/[\s/=>]/.test(html[i])) i++;
+    const name = html.slice(nameStart, i).toLowerCase();
+    while (i < length && /\s/.test(html[i])) i++;
+    let value = "";
+    if (html[i] === "=") {
+      i++;
+      while (i < length && /\s/.test(html[i])) i++;
+      const quote = html[i];
+      if (quote === '"' || quote === "'") {
+        const close = html.indexOf(quote, i + 1);
+        const stop = close === -1 ? length : close;
+        value = html.slice(i + 1, stop);
+        i = stop + 1;
+      } else {
+        const valueStart = i;
+        while (i < length && !/[\s>]/.test(html[i])) i++;
+        value = html.slice(valueStart, i);
+      }
+    }
+    if (name && !(name in attributes)) attributes[name] = value;
+  }
+  return {
+    name: "",
+    closing: match[1] === "/",
+    attributes,
+    end: length
+  };
+}
+function sanitizeHtml(input) {
+  const html = String(input ?? "");
+  const out = [];
+  const stack = [];
+  let i = 0;
+  const closeTo = (name) => {
+    const at = stack.lastIndexOf(name);
+    if (at === -1) return;
+    while (stack.length > at) out.push(`</${stack.pop()}>`);
+  };
+  while (i < html.length) {
+    const lt = html.indexOf("<", i);
+    if (lt === -1) {
+      out.push(escapeText(decodeEntities(html.slice(i))));
+      break;
+    }
+    if (lt > i) out.push(escapeText(decodeEntities(html.slice(i, lt))));
+    if (html.startsWith("<!--", lt)) {
+      const close = html.indexOf("-->", lt + 4);
+      i = close === -1 ? html.length : close + 3;
+      continue;
+    }
+    if (html[lt + 1] === "!" || html[lt + 1] === "?") {
+      const close = html.indexOf(">", lt);
+      i = close === -1 ? html.length : close + 1;
+      continue;
+    }
+    const tag = parseTag(html, lt);
+    if (!tag) {
+      out.push("&lt;");
+      i = lt + 1;
+      continue;
+    }
+    i = tag.end;
+    if (!tag.closing && DROP_WITH_CONTENT.has(tag.name)) {
+      const closer = new RegExp(`</${tag.name}[\\s/>]`, "i").exec(html.slice(i));
+      if (!closer) {
+        i = html.length;
+      } else {
+        const close = html.indexOf(">", i + closer.index);
+        i = close === -1 ? html.length : close + 1;
+      }
+      continue;
+    }
+    const name = TAG_ALIASES[tag.name] ?? tag.name;
+    if (!ALLOWED_TAGS.has(name)) continue;
+    if (tag.closing) {
+      if (!VOID_TAGS.has(name)) closeTo(name);
+      continue;
+    }
+    if (VOID_TAGS.has(name)) {
+      out.push("<br>");
+      continue;
+    }
+    if (name === "a") {
+      closeTo("a");
+      const href = tag.attributes.href;
+      if (href !== void 0 && isSafeUrl(href)) {
+        out.push(
+          `<a href="${escapeAttribute(decodeEntities(href).trim())}" rel="noopener noreferrer nofollow" target="_blank">`
+        );
+      } else {
+        out.push("<a>");
+      }
+      stack.push("a");
+      continue;
+    }
+    if (name === "p" || name === "h2" || name === "h3" || name === "blockquote") {
+      for (const open of ["p", "h2", "h3"]) closeTo(open);
+    }
+    if (name === "li") closeTo("li");
+    out.push(`<${name}>`);
+    stack.push(name);
+  }
+  while (stack.length) out.push(`</${stack.pop()}>`);
+  return out.join("").replace(/<a><\/a>/g, "");
+}
+function htmlToText(html) {
+  return decodeEntities(html.replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]*>/g, "")).trim();
+}
+export {
+  htmlToText,
+  isSafeUrl,
+  sanitizeHtml
+};

package/dist/shell/app-shell/app-shell.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode, type RefObject } from "react";
+/** Container width (px) below which the shell is compact: the sidebar becomes a drawer. */
+export declare const APP_SHELL_BREAKPOINT = 900;
+/**
+ * Whether the measured width of `resolve(ref.current)` is under the breakpoint. Starts as
+ * `false` (desktop) on the server and for the first client render, then measures before paint.
+ */
+export declare function useCompactContainer(ref: RefObject<HTMLElement | null>, resolve?: (element: HTMLElement) => Element | null, enabled?: boolean): boolean;
+interface AppShellState {
+    compact: boolean;
+}
+/** `null` outside an `AppShell`; otherwise whether the shell is narrower than 900 px. */
+export declare function useAppShell(): AppShellState | null;
+export interface AppShellProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Root of the app frame (sidebar + topbar + page). It is the `app` container: the sidebar turns
+ * into a drawer and the topbar shows its menu button when the SHELL is under 900 px wide,
+ * whatever the viewport is, so the same shell works in a full page, a preview or a story.
+ */
+export declare function AppShell({ children, className }: AppShellProps): import("react").JSX.Element;
+export {};

package/dist/shell/app-shell/app-shell.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../utils/cn.js";
+const APP_SHELL_BREAKPOINT = 900;
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useCompactContainer(ref, resolve = (element) => element, enabled = true) {
+  const [compact, setCompact] = useState(false);
+  useIsomorphicLayoutEffect(() => {
+    const element = ref.current ? resolve(ref.current) : null;
+    if (!enabled || !element) return;
+    const measure = () => setCompact(element.getBoundingClientRect().width < APP_SHELL_BREAKPOINT);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref, enabled]);
+  return compact;
+}
+const AppShellContext = createContext(null);
+function useAppShell() {
+  return useContext(AppShellContext);
+}
+function AppShell({ children, className }) {
+  const ref = useRef(null);
+  const compact = useCompactContainer(ref);
+  return /* @__PURE__ */ jsx(AppShellContext.Provider, { value: { compact }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("@container/app flex min-w-0", className), children }) });
+}
+export {
+  APP_SHELL_BREAKPOINT,
+  AppShell,
+  useAppShell,
+  useCompactContainer
+};

package/dist/shell/app-shell/index.d.ts

@@ -0,0 +1 @@
+export { APP_SHELL_BREAKPOINT, AppShell, type AppShellProps, useAppShell, } from "./app-shell.js";

package/dist/shell/app-shell/index.js

@@ -0,0 +1,10 @@
+import {
+  APP_SHELL_BREAKPOINT,
+  AppShell,
+  useAppShell
+} from "./app-shell.js";
+export {
+  APP_SHELL_BREAKPOINT,
+  AppShell,
+  useAppShell
+};

package/dist/shell/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./app-shell/index.js";
+export * from "./sidebar/index.js";
+export * from "./topbar/index.js";

package/dist/shell/index.js

@@ -0,0 +1,3 @@
+export * from "./app-shell/index.js";
+export * from "./sidebar/index.js";
+export * from "./topbar/index.js";

package/dist/shell/sidebar/index.d.ts

@@ -0,0 +1 @@
+export { Sidebar, type SidebarGroup, type SidebarItem, type SidebarLinkProps, type SidebarProps, type SidebarRenderLink, } from "./sidebar.js";