fromsrc 0.0.0 → 0.0.2

package/dist/components/create.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState, useId, useRef, useCallback } from 'react';
+import { CopyButton } from './copybutton';
+
+const managers = ["npm", "pnpm", "yarn", "bun"];
+const commands = {
+  npm: "npm create",
+  pnpm: "pnpm create",
+  yarn: "yarn create",
+  bun: "bun create"
+};
+function CreateBase({ package: pkg = "fromsrc" }) {
+  const [active, setActive] = useState("npm");
+  const command = `${commands[active]} ${pkg}`;
+  const id = useId();
+  const tablistRef = useRef(null);
+  const mapRef = useRef(/* @__PURE__ */ new Map());
+  for (const manager of managers) {
+    if (!mapRef.current.has(manager)) {
+      mapRef.current.set(manager, mapRef.current.size);
+    }
+  }
+  const getTabId = useCallback((value) => `${id}-tab-${mapRef.current.get(value) ?? 0}`, [id]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      const currentIndex = managers.indexOf(active);
+      let nextIndex = currentIndex;
+      switch (e.key) {
+        case "ArrowLeft":
+          nextIndex = currentIndex > 0 ? currentIndex - 1 : managers.length - 1;
+          break;
+        case "ArrowRight":
+          nextIndex = currentIndex < managers.length - 1 ? currentIndex + 1 : 0;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = managers.length - 1;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      const next = managers[nextIndex];
+      if (next) setActive(next);
+      const tabs = tablistRef.current?.querySelectorAll('[role="tab"]');
+      tabs?.[nextIndex]?.focus();
+    },
+    [active]
+  );
+  const handleTabClick = useCallback((manager) => {
+    setActive(manager);
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      role: "figure",
+      "aria-label": `Package manager command: ${command}`,
+      style: {
+        position: "relative",
+        margin: "24px 0",
+        borderRadius: "8px",
+        backgroundColor: "#0d0d0d",
+        border: "1px solid #1c1c1c",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "0 12px",
+              height: "40px",
+              borderBottom: "1px solid #1c1c1c"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: tablistRef,
+                  role: "tablist",
+                  "aria-label": "Select package manager",
+                  onKeyDown: handleKeyDown,
+                  style: { display: "flex", alignItems: "center", gap: "4px" },
+                  children: managers.map((m, index) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      id: getTabId(m),
+                      type: "button",
+                      role: "tab",
+                      "aria-selected": active === m,
+                      "aria-controls": `${id}-panel`,
+                      tabIndex: active === m ? 0 : -1,
+                      onClick: () => handleTabClick(m),
+                      style: {
+                        padding: "4px 10px",
+                        fontSize: "13px",
+                        color: active === m ? "#fafafa" : "#737373",
+                        background: "transparent",
+                        border: "none",
+                        cursor: "pointer",
+                        borderBottom: active === m ? "2px solid #fafafa" : "2px solid transparent",
+                        marginBottom: "-1px",
+                        transition: "color 0.15s"
+                      },
+                      children: m
+                    },
+                    m
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx(CopyButton, { text: command })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: `${id}-panel`,
+            role: "tabpanel",
+            "aria-labelledby": getTabId(active),
+            tabIndex: 0,
+            style: {
+              padding: "14px 16px",
+              fontSize: "13px",
+              lineHeight: "1.6",
+              fontFamily: "var(--font-mono), ui-monospace, monospace"
+            },
+            children: /* @__PURE__ */ jsxs("code", { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "#7ee787" }, children: commands[active] }),
+              /* @__PURE__ */ jsxs("span", { style: { color: "#fafafa" }, children: [
+                " ",
+                pkg
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+const Create = memo(CreateBase);
+
+export { Create };

package/dist/components/definition.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+
+/**
+ * Props for the DefinitionList component
+ */
+type DefinitionListProps = ComponentProps<"dl">;
+/**
+ * A semantic definition list container using dl element
+ */
+declare const DefinitionList: react.NamedExoticComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDListElement>, HTMLDListElement>>;
+/**
+ * Props for the Definition component
+ */
+interface DefinitionProps extends ComponentProps<"div"> {
+    /** The term being defined */
+    term: ReactNode;
+}
+/**
+ * A single definition item with term and description
+ */
+declare const Definition: react.NamedExoticComponent<DefinitionProps>;
+/**
+ * Props for the Glossary component
+ */
+type GlossaryProps = ComponentProps<"dl">;
+/**
+ * A styled glossary container using semantic dl element
+ */
+declare const Glossary: react.NamedExoticComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDListElement>, HTMLDListElement>>;
+/**
+ * Props for the GlossaryItem component
+ */
+interface GlossaryItemProps extends ComponentProps<"div"> {
+    /** The term being defined */
+    term: ReactNode;
+}
+/**
+ * A single glossary item with term and description
+ */
+declare const GlossaryItem: react.NamedExoticComponent<GlossaryItemProps>;
+
+export { Definition, DefinitionList, type DefinitionListProps, type DefinitionProps, Glossary, GlossaryItem, type GlossaryItemProps, type GlossaryProps };

package/dist/components/definition.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const DefinitionList = memo(function DefinitionList2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("dl", { className: className ?? "my-6 space-y-4", ...props });
+});
+const Definition = memo(function Definition2({
+  term,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: className ?? "border-b border-line pb-4 last:border-0 last:pb-0", ...props, children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-fg", children: term }),
+    /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-muted", children })
+  ] });
+});
+const Glossary = memo(function Glossary2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      className: className ?? "my-6 rounded-xl border border-line overflow-hidden divide-y divide-line",
+      ...props
+    }
+  );
+});
+const GlossaryItem = memo(function GlossaryItem2({
+  term,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: className ?? "p-4 flex flex-col gap-1", ...props, children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-fg", children: term }),
+    /* @__PURE__ */ jsx("dd", { className: "text-sm text-muted", children })
+  ] });
+});
+
+export { Definition, DefinitionList, Glossary, GlossaryItem };

package/dist/components/diffview.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+
+interface DiffViewProps {
+    before: string;
+    after: string;
+    lang?: string;
+    title?: string;
+    mode?: "unified" | "split";
+}
+declare const DiffView: react.NamedExoticComponent<DiffViewProps>;
+
+export { DiffView, type DiffViewProps };

package/dist/components/diffview.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useMemo } from 'react';
+
+function computediff(before, after) {
+  const beforelines = before.split("\n");
+  const afterlines = after.split("\n");
+  const m = beforelines.length;
+  const n = afterlines.length;
+  const lcs = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
+  for (let i2 = 1; i2 <= m; i2++) {
+    for (let j2 = 1; j2 <= n; j2++) {
+      const row = lcs[i2];
+      const prevrow = lcs[i2 - 1];
+      if (!row || !prevrow) continue;
+      const diag = prevrow[j2 - 1] ?? 0;
+      const up = prevrow[j2] ?? 0;
+      const left = row[j2 - 1] ?? 0;
+      if (beforelines[i2 - 1] === afterlines[j2 - 1]) {
+        row[j2] = diag + 1;
+      } else {
+        row[j2] = Math.max(up, left);
+      }
+    }
+  }
+  const result = [];
+  let i = m;
+  let j = n;
+  let beforenum = m;
+  let afternum = n;
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && beforelines[i - 1] === afterlines[j - 1]) {
+      const content = beforelines[i - 1];
+      if (content === void 0) break;
+      result.unshift({ type: "context", content, beforeNum: beforenum, afterNum: afternum });
+      i--;
+      j--;
+      beforenum--;
+      afternum--;
+    } else if (j > 0 && (i === 0 || (lcs[i]?.[j - 1] ?? 0) >= (lcs[i - 1]?.[j] ?? 0))) {
+      const content = afterlines[j - 1];
+      if (content === void 0) break;
+      result.unshift({ type: "add", content, afterNum: afternum });
+      j--;
+      afternum--;
+    } else if (i > 0) {
+      const content = beforelines[i - 1];
+      if (content === void 0) break;
+      result.unshift({ type: "remove", content, beforeNum: beforenum });
+      i--;
+      beforenum--;
+    }
+  }
+  return result;
+}
+const containerstyle = {
+  position: "relative",
+  margin: "24px 0",
+  borderRadius: "8px",
+  backgroundColor: "#0d0d0d",
+  border: "1px solid #1c1c1c",
+  overflow: "hidden"
+};
+const headerstyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "0 16px",
+  height: "40px",
+  backgroundColor: "#161b22",
+  borderBottom: "1px solid #1c1c1c"
+};
+const titlestyle = {
+  fontSize: "0.8rem",
+  fontFamily: "ui-monospace, monospace",
+  color: "#a0a0a0"
+};
+const linestyle = {
+  display: "flex",
+  fontFamily: "ui-monospace, monospace",
+  fontSize: "13px",
+  lineHeight: "1.6"
+};
+const linenumstyle = {
+  display: "inline-block",
+  width: "40px",
+  padding: "0 8px",
+  textAlign: "right",
+  color: "#4a4a4a",
+  userSelect: "none"
+};
+function DiffLineComponent({ line, showBefore }) {
+  const num = showBefore ? line.beforeNum : line.afterNum || line.beforeNum;
+  const bg = line.type === "add" ? "rgba(46, 160, 67, 0.15)" : line.type === "remove" ? "rgba(248, 81, 73, 0.15)" : "transparent";
+  const color = line.type === "add" ? "#3fb950" : line.type === "remove" ? "#f85149" : "#e6edf3";
+  const prefix = line.type === "add" ? "+ " : line.type === "remove" ? "- " : "";
+  return /* @__PURE__ */ jsxs("div", { style: { ...linestyle, backgroundColor: bg }, children: [
+    /* @__PURE__ */ jsx("span", { style: linenumstyle, children: num }),
+    /* @__PURE__ */ jsx("span", { style: { paddingLeft: "8px", paddingRight: "16px", flex: 1 }, children: /* @__PURE__ */ jsxs("span", { style: { color }, children: [
+      prefix,
+      line.content
+    ] }) })
+  ] });
+}
+const DiffView = memo(function DiffView2({
+  before,
+  after,
+  lang,
+  title,
+  mode = "unified"
+}) {
+  const diff = useMemo(() => computediff(before, after), [before, after]);
+  const hasheader = title || lang;
+  if (mode === "split") {
+    return /* @__PURE__ */ jsxs("figure", { role: "group", style: containerstyle, children: [
+      hasheader && /* @__PURE__ */ jsx("div", { style: headerstyle, children: /* @__PURE__ */ jsx("span", { style: titlestyle, children: title || lang }) }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", overflow: "auto", maxHeight: "500px" }, children: [
+        /* @__PURE__ */ jsx("div", { style: { borderRight: "1px solid #1c1c1c" }, children: diff.map((line, idx) => line.type === "add" ? null : /* @__PURE__ */ jsx(DiffLineComponent, { line, showBefore: true }, idx)) }),
+        /* @__PURE__ */ jsx("div", { children: diff.map((line, idx) => line.type === "remove" ? null : /* @__PURE__ */ jsx(DiffLineComponent, { line }, idx)) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("figure", { role: "group", style: containerstyle, children: [
+    hasheader && /* @__PURE__ */ jsx("div", { style: headerstyle, children: /* @__PURE__ */ jsx("span", { style: titlestyle, children: title || lang }) }),
+    /* @__PURE__ */ jsx("div", { style: { overflow: "auto", maxHeight: "500px" }, children: diff.map((line, idx) => /* @__PURE__ */ jsx(DiffLineComponent, { line }, idx)) })
+  ] });
+});
+
+export { DiffView };

package/dist/components/divider.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { ComponentProps, JSX } from 'react';
+
+/**
+ * Props for the Divider component
+ */
+interface DividerProps extends ComponentProps<"hr"> {
+    /**
+     * Optional label displayed in the center of the divider
+     */
+    label?: string;
+}
+declare function DividerBase({ label, className, ...props }: DividerProps): JSX.Element;
+/**
+ * Horizontal divider with optional centered label
+ */
+declare const Divider: react.MemoExoticComponent<typeof DividerBase>;
+
+export { Divider, type DividerProps };

package/dist/components/divider.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+function DividerBase({ label, className, ...props }) {
+  if (label) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "separator",
+        "aria-label": label,
+        className: className ?? "flex items-center gap-4 my-8",
+        children: [
+          /* @__PURE__ */ jsx("hr", { "aria-hidden": "true", className: "flex-1 border-0 h-px bg-line m-0" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted uppercase tracking-wider", children: label }),
+          /* @__PURE__ */ jsx("hr", { "aria-hidden": "true", className: "flex-1 border-0 h-px bg-line m-0" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("hr", { className: className ?? "border-line my-8", ...props });
+}
+const Divider = memo(DividerBase);
+
+export { Divider };

package/dist/components/docheader.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+interface DocHeaderProps {
+    title: string;
+    description?: string;
+    breadcrumb?: {
+        label: string;
+        href: string;
+    }[];
+    readingTime?: string;
+    className?: string;
+}
+declare function DocHeaderBase({ title, description, breadcrumb, readingTime, className, }: DocHeaderProps): JSX.Element;
+declare const DocHeader: react.MemoExoticComponent<typeof DocHeaderBase>;
+
+export { DocHeader, type DocHeaderProps };

package/dist/components/docheader.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+function DocHeaderBase({
+  title,
+  description,
+  breadcrumb,
+  readingTime,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("header", { className: `space-y-3 ${className || ""}`, children: [
+    breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "text-xs text-muted", children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-1.5", children: breadcrumb.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+      i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-dim", children: "/" }),
+      i === breadcrumb.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "text-fg", children: item.label }) : /* @__PURE__ */ jsx("a", { href: item.href, className: "hover:text-fg transition-colors", children: item.label })
+    ] }, item.href)) }) }),
+    /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-muted text-lg", children: description }),
+    readingTime && /* @__PURE__ */ jsx("span", { className: "block text-dim text-sm", children: readingTime })
+  ] });
+}
+const DocHeader = memo(DocHeaderBase);
+
+export { DocHeader };

package/dist/components/doclinkcard.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface DocLinkCardProps {
+    title: string;
+    description?: string;
+    href: string;
+    icon?: ReactNode;
+    className?: string;
+}
+interface DocLinkCardsProps {
+    children: ReactNode;
+    columns?: 1 | 2 | 3;
+    className?: string;
+}
+declare const DocLinkCard: react.NamedExoticComponent<DocLinkCardProps>;
+declare const DocLinkCards: react.NamedExoticComponent<DocLinkCardsProps>;
+
+export { DocLinkCard, type DocLinkCardProps, DocLinkCards, type DocLinkCardsProps };

package/dist/components/doclinkcard.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const DocLinkCard = memo(function DocLinkCard2({
+  title,
+  description,
+  href,
+  icon,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      className: `flex items-center gap-3 p-4 rounded-xl border border-line bg-surface/30 hover:border-fg/20 hover:-translate-y-0.5 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-fg/20 transition-all group ${className ?? ""}`,
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "shrink-0 size-9 rounded-lg bg-bg border border-line flex items-center justify-center text-muted group-hover:text-fg transition-colors", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-fg truncate", children: title }),
+          description && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted truncate mt-0.5", children: description })
+        ] }),
+        /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "shrink-0 size-4 text-muted group-hover:text-fg transition-colors", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" }) })
+      ]
+    }
+  );
+});
+const grid = { 1: "grid-cols-1", 2: "grid-cols-1 md:grid-cols-2", 3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" };
+const DocLinkCards = memo(function DocLinkCards2({
+  children,
+  columns = 2,
+  className
+}) {
+  return /* @__PURE__ */ jsx("nav", { className: `my-6 grid gap-3 ${grid[columns]} ${className ?? ""}`, children });
+});
+
+export { DocLinkCard, DocLinkCards };

package/dist/components/docslayout.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface DocsLayoutProps {
+    children: ReactNode;
+    sidebar?: ReactNode;
+    toc?: ReactNode;
+    header?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+}
+declare const DocsLayout: react.NamedExoticComponent<DocsLayoutProps>;
+
+export { DocsLayout, type DocsLayoutProps };

package/dist/components/docslayout.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const DocsLayout = memo(function DocsLayout2({
+  children,
+  sidebar,
+  toc,
+  header,
+  footer,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `min-h-screen flex flex-col ${className ?? ""}`, children: [
+    header,
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1", children: [
+      sidebar && /* @__PURE__ */ jsx("aside", { className: "hidden lg:block w-64 shrink-0", children: sidebar }),
+      /* @__PURE__ */ jsx("main", { className: "flex-1 max-w-3xl mx-auto px-6 py-8", children }),
+      toc && /* @__PURE__ */ jsx("aside", { className: "hidden xl:block w-56 shrink-0", children: toc })
+    ] }),
+    footer
+  ] });
+});
+
+export { DocsLayout };

package/dist/components/dropdown.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+
+/**
+ * Single item in a dropdown menu
+ */
+interface DropdownItem {
+    label: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    danger?: boolean;
+}
+/**
+ * Props for the Dropdown component
+ */
+interface DropdownProps {
+    trigger: ReactNode;
+    items: (DropdownItem | "separator")[];
+    align?: "start" | "end";
+}
+declare function Dropdown({ trigger, items, align }: DropdownProps): ReactNode;
+
+export { Dropdown, type DropdownItem, type DropdownProps };