@silicajs/theme-amethyst 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,12 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { HTMLAttributes } from 'react';
3
+
4
+ type CalloutProps = HTMLAttributes<HTMLElement> & {
5
+ "data-callout"?: string;
6
+ "data-callout-title"?: string;
7
+ "data-callout-foldable"?: string;
8
+ "data-callout-open"?: string;
9
+ };
10
+ declare function Callout({ children, className, "data-callout": callout, "data-callout-title": title, "data-callout-foldable": foldable, "data-callout-open": open, ...props }: CalloutProps): react_jsx_runtime.JSX.Element;
11
+
12
+ export { Callout, type CalloutProps };
@@ -0,0 +1,179 @@
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import { cva } from "class-variance-authority";
3
+ import { cn } from "@silicajs/ui/lib/utils";
4
+ import {
5
+ AlertTriangle,
6
+ Bug,
7
+ CheckCircle2,
8
+ ChevronRight,
9
+ CircleHelp,
10
+ ClipboardList,
11
+ Flame,
12
+ Info,
13
+ List,
14
+ Pencil,
15
+ Quote,
16
+ XCircle,
17
+ Zap
18
+ } from "lucide-react";
19
+ const calloutVariants = cva(
20
+ "silica-callout my-5 rounded-lg border px-4 py-3 text-foreground",
21
+ {
22
+ variants: {
23
+ intent: {
24
+ abstract: "border-teal-500/40 bg-teal-500/10",
25
+ danger: "border-red-500/40 bg-red-500/10",
26
+ question: "border-yellow-500/40 bg-yellow-500/10",
27
+ muted: "border-muted-foreground/40 bg-muted/70",
28
+ primary: "border-primary/40 bg-primary/10",
29
+ success: "border-green-500/40 bg-green-500/10",
30
+ tip: "border-sky-500/40 bg-sky-500/10",
31
+ warning: "border-orange-500/40 bg-orange-500/10"
32
+ }
33
+ },
34
+ defaultVariants: {
35
+ intent: "muted"
36
+ }
37
+ }
38
+ );
39
+ const calloutTitleVariants = cva(
40
+ "flex items-center gap-2 text-sm font-semibold leading-6",
41
+ {
42
+ variants: {
43
+ intent: {
44
+ abstract: "text-teal-700 dark:text-teal-300",
45
+ danger: "text-red-700 dark:text-red-300",
46
+ question: "text-yellow-700 dark:text-yellow-300",
47
+ muted: "text-muted-foreground",
48
+ primary: "text-primary",
49
+ success: "text-green-700 dark:text-green-300",
50
+ tip: "text-sky-700 dark:text-sky-300",
51
+ warning: "text-orange-700 dark:text-orange-300"
52
+ }
53
+ },
54
+ defaultVariants: {
55
+ intent: "muted"
56
+ }
57
+ }
58
+ );
59
+ const DEFAULT_CALLOUT = {
60
+ icon: Pencil,
61
+ intent: "primary"
62
+ };
63
+ const CALLOUT_TYPES = {
64
+ abstract: { icon: ClipboardList, intent: "abstract" },
65
+ attention: { icon: AlertTriangle, intent: "warning" },
66
+ bug: { icon: Bug, intent: "danger" },
67
+ caution: { icon: AlertTriangle, intent: "warning" },
68
+ check: { icon: CheckCircle2, intent: "success" },
69
+ cite: { icon: Quote, intent: "muted" },
70
+ danger: { icon: Zap, intent: "danger" },
71
+ done: { icon: CheckCircle2, intent: "success" },
72
+ error: { icon: Zap, intent: "danger" },
73
+ example: { icon: List, intent: "muted" },
74
+ fail: { icon: XCircle, intent: "danger" },
75
+ failure: { icon: XCircle, intent: "danger" },
76
+ faq: { icon: CircleHelp, intent: "question" },
77
+ help: { icon: CircleHelp, intent: "question" },
78
+ hint: { icon: Flame, intent: "tip" },
79
+ important: { icon: Flame, intent: "tip" },
80
+ info: { icon: Info, intent: "primary" },
81
+ missing: { icon: XCircle, intent: "danger" },
82
+ note: DEFAULT_CALLOUT,
83
+ question: { icon: CircleHelp, intent: "question" },
84
+ quote: { icon: Quote, intent: "muted" },
85
+ success: { icon: CheckCircle2, intent: "success" },
86
+ summary: { icon: ClipboardList, intent: "abstract" },
87
+ tip: { icon: Flame, intent: "tip" },
88
+ tldr: { icon: ClipboardList, intent: "abstract" },
89
+ todo: { icon: CheckCircle2, intent: "primary" },
90
+ warning: { icon: AlertTriangle, intent: "warning" }
91
+ };
92
+ function Callout({
93
+ children,
94
+ className,
95
+ "data-callout": callout = "muted",
96
+ "data-callout-title": title,
97
+ "data-callout-foldable": foldable,
98
+ "data-callout-open": open,
99
+ ...props
100
+ }) {
101
+ const type = callout.toLowerCase();
102
+ const { icon: Icon, intent } = CALLOUT_TYPES[type] ?? DEFAULT_CALLOUT;
103
+ const heading = /* @__PURE__ */ jsxs(Fragment, { children: [
104
+ /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 flex-none", "aria-hidden": "true" }),
105
+ /* @__PURE__ */ jsx("span", { children: title || titleCase(type) })
106
+ ] });
107
+ if (foldable === "true") {
108
+ return /* @__PURE__ */ jsxs(
109
+ "details",
110
+ {
111
+ ...props,
112
+ "data-slot": "callout",
113
+ className: cn("group/callout", calloutVariants({ intent }), className),
114
+ "data-callout": type,
115
+ open: open !== "false" ? true : void 0,
116
+ children: [
117
+ /* @__PURE__ */ jsxs(
118
+ "summary",
119
+ {
120
+ "data-slot": "callout-title",
121
+ className: cn(
122
+ calloutTitleVariants({ intent }),
123
+ "cursor-pointer list-none [&::-webkit-details-marker]:hidden"
124
+ ),
125
+ children: [
126
+ heading,
127
+ /* @__PURE__ */ jsx(
128
+ ChevronRight,
129
+ {
130
+ className: "ml-auto h-4 w-4 transition-transform group-open/callout:rotate-90",
131
+ "aria-hidden": "true"
132
+ }
133
+ )
134
+ ]
135
+ }
136
+ ),
137
+ /* @__PURE__ */ jsx(CalloutContent, { children })
138
+ ]
139
+ }
140
+ );
141
+ }
142
+ return /* @__PURE__ */ jsxs(
143
+ "aside",
144
+ {
145
+ ...props,
146
+ "data-slot": "callout",
147
+ className: cn(calloutVariants({ intent }), className),
148
+ "data-callout": type,
149
+ children: [
150
+ /* @__PURE__ */ jsx(
151
+ "div",
152
+ {
153
+ "data-slot": "callout-title",
154
+ className: calloutTitleVariants({ intent }),
155
+ children: heading
156
+ }
157
+ ),
158
+ /* @__PURE__ */ jsx(CalloutContent, { children })
159
+ ]
160
+ }
161
+ );
162
+ }
163
+ function CalloutContent({ children }) {
164
+ return /* @__PURE__ */ jsx(
165
+ "div",
166
+ {
167
+ "data-slot": "callout-content",
168
+ className: "mt-2 [&>:first-child]:mt-0 [&>:last-child]:mb-0",
169
+ children
170
+ }
171
+ );
172
+ }
173
+ function titleCase(value) {
174
+ return value.split(/[-_\s]+/).filter(Boolean).map((part) => part[0].toUpperCase() + part.slice(1)).join(" ");
175
+ }
176
+ export {
177
+ Callout
178
+ };
179
+ //# sourceMappingURL=callout.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/callout.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@silicajs/ui/lib/utils\";\nimport {\n AlertTriangle,\n Bug,\n CheckCircle2,\n ChevronRight,\n CircleHelp,\n ClipboardList,\n Flame,\n Info,\n List,\n Pencil,\n Quote,\n XCircle,\n Zap,\n type LucideIcon,\n} from \"lucide-react\";\n\nconst calloutVariants = cva(\n \"silica-callout my-5 rounded-lg border px-4 py-3 text-foreground\",\n {\n variants: {\n intent: {\n abstract: \"border-teal-500/40 bg-teal-500/10\",\n danger: \"border-red-500/40 bg-red-500/10\",\n question: \"border-yellow-500/40 bg-yellow-500/10\",\n muted: \"border-muted-foreground/40 bg-muted/70\",\n primary: \"border-primary/40 bg-primary/10\",\n success: \"border-green-500/40 bg-green-500/10\",\n tip: \"border-sky-500/40 bg-sky-500/10\",\n warning: \"border-orange-500/40 bg-orange-500/10\",\n },\n },\n defaultVariants: {\n intent: \"muted\",\n },\n },\n);\n\nconst calloutTitleVariants = cva(\n \"flex items-center gap-2 text-sm font-semibold leading-6\",\n {\n variants: {\n intent: {\n abstract: \"text-teal-700 dark:text-teal-300\",\n danger: \"text-red-700 dark:text-red-300\",\n question: \"text-yellow-700 dark:text-yellow-300\",\n muted: \"text-muted-foreground\",\n primary: \"text-primary\",\n success: \"text-green-700 dark:text-green-300\",\n tip: \"text-sky-700 dark:text-sky-300\",\n warning: \"text-orange-700 dark:text-orange-300\",\n },\n },\n defaultVariants: {\n intent: \"muted\",\n },\n },\n);\n\ntype CalloutIntent = NonNullable<\n VariantProps<typeof calloutVariants>[\"intent\"]\n>;\n\ntype CalloutDefinition = {\n icon: LucideIcon;\n intent: CalloutIntent;\n};\n\nconst DEFAULT_CALLOUT: CalloutDefinition = {\n icon: Pencil,\n intent: \"primary\",\n};\n\nconst CALLOUT_TYPES: Record<string, CalloutDefinition> = {\n abstract: { icon: ClipboardList, intent: \"abstract\" },\n attention: { icon: AlertTriangle, intent: \"warning\" },\n bug: { icon: Bug, intent: \"danger\" },\n caution: { icon: AlertTriangle, intent: \"warning\" },\n check: { icon: CheckCircle2, intent: \"success\" },\n cite: { icon: Quote, intent: \"muted\" },\n danger: { icon: Zap, intent: \"danger\" },\n done: { icon: CheckCircle2, intent: \"success\" },\n error: { icon: Zap, intent: \"danger\" },\n example: { icon: List, intent: \"muted\" },\n fail: { icon: XCircle, intent: \"danger\" },\n failure: { icon: XCircle, intent: \"danger\" },\n faq: { icon: CircleHelp, intent: \"question\" },\n help: { icon: CircleHelp, intent: \"question\" },\n hint: { icon: Flame, intent: \"tip\" },\n important: { icon: Flame, intent: \"tip\" },\n info: { icon: Info, intent: \"primary\" },\n missing: { icon: XCircle, intent: \"danger\" },\n note: DEFAULT_CALLOUT,\n question: { icon: CircleHelp, intent: \"question\" },\n quote: { icon: Quote, intent: \"muted\" },\n success: { icon: CheckCircle2, intent: \"success\" },\n summary: { icon: ClipboardList, intent: \"abstract\" },\n tip: { icon: Flame, intent: \"tip\" },\n tldr: { icon: ClipboardList, intent: \"abstract\" },\n todo: { icon: CheckCircle2, intent: \"primary\" },\n warning: { icon: AlertTriangle, intent: \"warning\" },\n};\n\nexport type CalloutProps = HTMLAttributes<HTMLElement> & {\n \"data-callout\"?: string;\n \"data-callout-title\"?: string;\n \"data-callout-foldable\"?: string;\n \"data-callout-open\"?: string;\n};\n\nexport function Callout({\n children,\n className,\n \"data-callout\": callout = \"muted\",\n \"data-callout-title\": title,\n \"data-callout-foldable\": foldable,\n \"data-callout-open\": open,\n ...props\n}: CalloutProps) {\n const type = callout.toLowerCase();\n const { icon: Icon, intent } = CALLOUT_TYPES[type] ?? DEFAULT_CALLOUT;\n const heading = (\n <>\n <Icon className=\"h-4 w-4 flex-none\" aria-hidden=\"true\" />\n <span>{title || titleCase(type)}</span>\n </>\n );\n\n if (foldable === \"true\") {\n return (\n <details\n {...props}\n data-slot=\"callout\"\n className={cn(\"group/callout\", calloutVariants({ intent }), className)}\n data-callout={type}\n open={open !== \"false\" ? true : undefined}\n >\n <summary\n data-slot=\"callout-title\"\n className={cn(\n calloutTitleVariants({ intent }),\n \"cursor-pointer list-none [&::-webkit-details-marker]:hidden\",\n )}\n >\n {heading}\n <ChevronRight\n className=\"ml-auto h-4 w-4 transition-transform group-open/callout:rotate-90\"\n aria-hidden=\"true\"\n />\n </summary>\n <CalloutContent>{children}</CalloutContent>\n </details>\n );\n }\n\n return (\n <aside\n {...props}\n data-slot=\"callout\"\n className={cn(calloutVariants({ intent }), className)}\n data-callout={type}\n >\n <div\n data-slot=\"callout-title\"\n className={calloutTitleVariants({ intent })}\n >\n {heading}\n </div>\n <CalloutContent>{children}</CalloutContent>\n </aside>\n );\n}\n\nfunction CalloutContent({ children }: { children: ReactNode }) {\n return (\n <div\n data-slot=\"callout-content\"\n className=\"mt-2 [&>:first-child]:mt-0 [&>:last-child]:mb-0\"\n >\n {children}\n </div>\n );\n}\n\nfunction titleCase(value: string): string {\n return value\n .split(/[-_\\s]+/)\n .filter(Boolean)\n .map((part) => part[0]!.toUpperCase() + part.slice(1))\n .join(\" \");\n}\n"],"mappings":"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","names":[]}
@@ -0,0 +1,10 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { HTMLAttributes } from 'react';
3
+
4
+ type CodeBlockProps = HTMLAttributes<HTMLElement> & {
5
+ "data-language"?: string;
6
+ "data-language-label"?: string;
7
+ };
8
+ declare function CodeBlock({ children, className, "data-language": language, "data-language-label": languageLabel, ...props }: CodeBlockProps): react_jsx_runtime.JSX.Element;
9
+
10
+ export { CodeBlock, type CodeBlockProps };
@@ -0,0 +1,49 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { cn } from "@silicajs/ui/lib/utils";
3
+ import { Code2 } from "lucide-react";
4
+ function CodeBlock({
5
+ children,
6
+ className,
7
+ "data-language": language,
8
+ "data-language-label": languageLabel,
9
+ ...props
10
+ }) {
11
+ return /* @__PURE__ */ jsxs(
12
+ "figure",
13
+ {
14
+ ...props,
15
+ "data-slot": "code-block",
16
+ "data-language": language,
17
+ className: cn(
18
+ "p-2 my-6 overflow-hidden rounded-lg bg-(--tw-prose-pre-bg)",
19
+ "[&>pre]:m-0 [&>pre]:rounded-none [&>pre]:border-0 [&>pre]:shadow-none",
20
+ className
21
+ ),
22
+ children: [
23
+ languageLabel ? /* @__PURE__ */ jsx(
24
+ "figcaption",
25
+ {
26
+ "data-slot": "code-block-header",
27
+ className: "flex items-center justify-between px-3.5 pt-3.5 mt-0 text-xs leading-none tracking-wide text-muted-foreground",
28
+ children: /* @__PURE__ */ jsxs(
29
+ "span",
30
+ {
31
+ "data-slot": "code-block-language",
32
+ className: "inline-flex items-center gap-1.5",
33
+ children: [
34
+ /* @__PURE__ */ jsx(Code2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
35
+ languageLabel
36
+ ]
37
+ }
38
+ )
39
+ }
40
+ ) : null,
41
+ children
42
+ ]
43
+ }
44
+ );
45
+ }
46
+ export {
47
+ CodeBlock
48
+ };
49
+ //# sourceMappingURL=code-block.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/code-block.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cn } from \"@silicajs/ui/lib/utils\";\nimport { Code2 } from \"lucide-react\";\n\nexport type CodeBlockProps = HTMLAttributes<HTMLElement> & {\n \"data-language\"?: string;\n \"data-language-label\"?: string;\n};\n\nexport function CodeBlock({\n children,\n className,\n \"data-language\": language,\n \"data-language-label\": languageLabel,\n ...props\n}: CodeBlockProps) {\n return (\n <figure\n {...props}\n data-slot=\"code-block\"\n data-language={language}\n className={cn(\n \"p-2 my-6 overflow-hidden rounded-lg bg-(--tw-prose-pre-bg)\",\n \"[&>pre]:m-0 [&>pre]:rounded-none [&>pre]:border-0 [&>pre]:shadow-none\",\n className,\n )}\n >\n {languageLabel ? (\n <figcaption\n data-slot=\"code-block-header\"\n className=\"flex items-center justify-between px-3.5 pt-3.5 mt-0 text-xs leading-none tracking-wide text-muted-foreground\"\n >\n <span\n data-slot=\"code-block-language\"\n className=\"inline-flex items-center gap-1.5\"\n >\n <Code2 className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n {languageLabel}\n </span>\n </figcaption>\n ) : null}\n {children}\n </figure>\n );\n}\n"],"mappings":"AAgCU,SAIE,KAJF;AA/BV,SAAS,UAAU;AACnB,SAAS,aAAa;AAOf,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,GAAG;AACL,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAU;AAAA,MACV,iBAAe;AAAA,MACf,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA,wBACC;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACC,aAAU;AAAA,gBACV,WAAU;AAAA,gBAEV;AAAA,sCAAC,SAAM,WAAU,eAAc,eAAY,QAAO;AAAA,kBACjD;AAAA;AAAA;AAAA,YACH;AAAA;AAAA,QACF,IACE;AAAA,QACH;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}
@@ -0,0 +1,11 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { HTMLAttributes } from 'react';
3
+
4
+ type EmbedProps = HTMLAttributes<HTMLElement> & {
5
+ "data-embed-kind"?: string;
6
+ "data-embed-target"?: string;
7
+ src?: string;
8
+ };
9
+ declare function Embed({ children, className, "data-embed-kind": kind, "data-embed-target": target, src, ...props }: EmbedProps): react_jsx_runtime.JSX.Element;
10
+
11
+ export { Embed, type EmbedProps };
package/dist/embed.js ADDED
@@ -0,0 +1,29 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { cn } from "@silicajs/ui/lib/utils";
3
+ function Embed({
4
+ children,
5
+ className,
6
+ "data-embed-kind": kind,
7
+ "data-embed-target": target,
8
+ src,
9
+ ...props
10
+ }) {
11
+ return /* @__PURE__ */ jsx(
12
+ "figure",
13
+ {
14
+ ...props,
15
+ "data-slot": "embed",
16
+ "data-embed-kind": kind,
17
+ "data-embed-target": target,
18
+ className: cn(
19
+ "my-6 overflow-hidden rounded-lg border bg-muted/30",
20
+ className
21
+ ),
22
+ children: src && kind === "pdf" ? /* @__PURE__ */ jsx("object", { data: src, type: "application/pdf", className: "h-96 w-full", children }) : /* @__PURE__ */ jsx("div", { className: "p-4 text-sm text-muted-foreground", children })
23
+ }
24
+ );
25
+ }
26
+ export {
27
+ Embed
28
+ };
29
+ //# sourceMappingURL=embed.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/embed.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cn } from \"@silicajs/ui/lib/utils\";\n\nexport type EmbedProps = HTMLAttributes<HTMLElement> & {\n \"data-embed-kind\"?: string;\n \"data-embed-target\"?: string;\n src?: string;\n};\n\nexport function Embed({\n children,\n className,\n \"data-embed-kind\": kind,\n \"data-embed-target\": target,\n src,\n ...props\n}: EmbedProps) {\n return (\n <figure\n {...props}\n data-slot=\"embed\"\n data-embed-kind={kind}\n data-embed-target={target}\n className={cn(\n \"my-6 overflow-hidden rounded-lg border bg-muted/30\",\n className,\n )}\n >\n {src && kind === \"pdf\" ? (\n <object data={src} type=\"application/pdf\" className=\"h-96 w-full\">\n {children}\n </object>\n ) : (\n <div className=\"p-4 text-sm text-muted-foreground\">{children}</div>\n )}\n </figure>\n );\n}\n"],"mappings":"AA6BQ;AA5BR,SAAS,UAAU;AAQZ,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB;AAAA,EACA,GAAG;AACL,GAAe;AACb,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAU;AAAA,MACV,mBAAiB;AAAA,MACjB,qBAAmB;AAAA,MACnB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,iBAAO,SAAS,QACf,oBAAC,YAAO,MAAM,KAAK,MAAK,mBAAkB,WAAU,eACjD,UACH,IAEA,oBAAC,SAAI,WAAU,qCAAqC,UAAS;AAAA;AAAA,EAEjE;AAEJ;","names":[]}
@@ -0,0 +1,28 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { ThemeLayoutProps, ThemePageProps } from '@silicajs/core/theme';
3
+ import { Callout } from './callout.js';
4
+ import { CodeBlock } from './code-block.js';
5
+ import { Embed } from './embed.js';
6
+ import { Mermaid } from './mermaid.js';
7
+ import 'react';
8
+
9
+ declare function Layout({ navigation, config, children, Provider, }: ThemeLayoutProps): react_jsx_runtime.JSX.Element;
10
+ declare function PageRenderer({ page, graph, manifest }: ThemePageProps): react_jsx_runtime.JSX.Element;
11
+ declare const components: {
12
+ "silica-callout": typeof Callout;
13
+ "silica-code-block": typeof CodeBlock;
14
+ "silica-embed": typeof Embed;
15
+ "silica-mermaid": typeof Mermaid;
16
+ };
17
+ declare const _default: {
18
+ Layout: typeof Layout;
19
+ PageRenderer: typeof PageRenderer;
20
+ components: {
21
+ "silica-callout": typeof Callout;
22
+ "silica-code-block": typeof CodeBlock;
23
+ "silica-embed": typeof Embed;
24
+ "silica-mermaid": typeof Mermaid;
25
+ };
26
+ };
27
+
28
+ export { Layout, PageRenderer, components, _default as default };
package/dist/index.js ADDED
@@ -0,0 +1,116 @@
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import { tagToHref } from "@silicajs/core/runtime";
3
+ import {
4
+ Backlinks,
5
+ Breadcrumbs,
6
+ PageProperties,
7
+ SilicaLink,
8
+ TableOfContents
9
+ } from "@silicajs/components";
10
+ import {
11
+ SidebarInset,
12
+ SidebarProvider,
13
+ SidebarTrigger
14
+ } from "@silicajs/ui/components/sidebar";
15
+ import { Callout } from "./callout.js";
16
+ import { CodeBlock } from "./code-block.js";
17
+ import { Embed } from "./embed.js";
18
+ import { Mermaid } from "./mermaid.js";
19
+ import { Sidebar } from "./sidebar.js";
20
+ function DefaultProvider({ children }) {
21
+ return /* @__PURE__ */ jsx(Fragment, { children });
22
+ }
23
+ const THEME_INIT_SCRIPT = String.raw`
24
+ (function () {
25
+ try {
26
+ var storageKey = "silica-theme";
27
+ var root = document.documentElement;
28
+ var stored = window.localStorage.getItem(storageKey);
29
+ var theme =
30
+ stored === "dark" || stored === "light"
31
+ ? stored
32
+ : window.matchMedia("(prefers-color-scheme: dark)").matches
33
+ ? "dark"
34
+ : "light";
35
+
36
+ root.classList.remove("dark", "light");
37
+ root.classList.add(theme);
38
+ } catch (_) {}
39
+ })();
40
+ `;
41
+ function Layout({
42
+ navigation,
43
+ config,
44
+ children,
45
+ Provider = DefaultProvider
46
+ }) {
47
+ return /* @__PURE__ */ jsxs("html", { lang: "en", suppressHydrationWarning: true, children: [
48
+ /* @__PURE__ */ jsx("head", { children: /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: THEME_INIT_SCRIPT } }) }),
49
+ /* @__PURE__ */ jsx("body", { className: "min-h-svh bg-background font-sans text-foreground antialiased", children: /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsxs(SidebarProvider, { children: [
50
+ /* @__PURE__ */ jsx(Sidebar, { navigation, config }),
51
+ /* @__PURE__ */ jsxs(SidebarInset, { children: [
52
+ /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-10 flex h-12 shrink-0 items-center gap-2 border-b border-border bg-background px-3 md:hidden", children: [
53
+ /* @__PURE__ */ jsx(SidebarTrigger, {}),
54
+ /* @__PURE__ */ jsx(
55
+ SilicaLink,
56
+ {
57
+ href: "/",
58
+ className: "truncate text-sm font-semibold tracking-tight text-foreground",
59
+ children: config.title
60
+ }
61
+ )
62
+ ] }),
63
+ children
64
+ ] })
65
+ ] }) }) })
66
+ ] });
67
+ }
68
+ function PageRenderer({ page, graph, manifest }) {
69
+ const hasBreadcrumb = page.slug !== "index" && page.slug.includes("/");
70
+ return /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-6xl px-8 py-12 lg:grid lg:grid-cols-[minmax(0,1fr)_14rem] lg:gap-12", children: [
71
+ /* @__PURE__ */ jsxs("article", { className: "min-w-0", children: [
72
+ /* @__PURE__ */ jsxs("header", { className: "mb-10 flex flex-col gap-3", children: [
73
+ hasBreadcrumb ? /* @__PURE__ */ jsx(
74
+ Breadcrumbs,
75
+ {
76
+ slug: page.slug,
77
+ allSlugs: manifest.allSlugs,
78
+ className: "text-xs"
79
+ }
80
+ ) : null,
81
+ /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold tracking-tight text-foreground", children: page.title }),
82
+ page.description ? /* @__PURE__ */ jsx("p", { className: "text-lg leading-relaxed text-muted-foreground", children: page.description }) : null,
83
+ /* @__PURE__ */ jsx(PageProperties, { frontmatter: page.frontmatter }),
84
+ page.entry.tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 pt-1", children: page.entry.tags.map((tag) => /* @__PURE__ */ jsxs(
85
+ SilicaLink,
86
+ {
87
+ href: tagToHref(tag),
88
+ className: "inline-flex h-6 items-center rounded-full border border-border px-2 text-xs text-muted-foreground transition-colors hover:border-primary/40 hover:text-foreground",
89
+ children: [
90
+ /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70", children: "#" }),
91
+ /* @__PURE__ */ jsx("span", { className: "ml-0.5", children: tag })
92
+ ]
93
+ },
94
+ tag
95
+ )) }) : null
96
+ ] }),
97
+ /* @__PURE__ */ jsx("div", { className: "prose max-w-none", children: page.content }),
98
+ /* @__PURE__ */ jsx("div", { className: "mt-16", children: /* @__PURE__ */ jsx(Backlinks, { graph, slug: page.slug, manifest }) })
99
+ ] }),
100
+ /* @__PURE__ */ jsx("aside", { className: "mt-12 hidden lg:sticky lg:top-12 lg:mt-0 lg:block lg:self-start", children: /* @__PURE__ */ jsx(TableOfContents, { toc: page.toc }) })
101
+ ] });
102
+ }
103
+ const components = {
104
+ "silica-callout": Callout,
105
+ "silica-code-block": CodeBlock,
106
+ "silica-embed": Embed,
107
+ "silica-mermaid": Mermaid
108
+ };
109
+ var index_default = { Layout, PageRenderer, components };
110
+ export {
111
+ Layout,
112
+ PageRenderer,
113
+ components,
114
+ index_default as default
115
+ };
116
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { tagToHref } from \"@silicajs/core/runtime\";\nimport type { ThemeLayoutProps, ThemePageProps } from \"@silicajs/core/theme\";\nimport {\n Backlinks,\n Breadcrumbs,\n PageProperties,\n SilicaLink,\n TableOfContents,\n} from \"@silicajs/components\";\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@silicajs/ui/components/sidebar\";\n\nimport { Callout } from \"./callout.js\";\nimport { CodeBlock } from \"./code-block.js\";\nimport { Embed } from \"./embed.js\";\nimport { Mermaid } from \"./mermaid.js\";\nimport { Sidebar } from \"./sidebar.js\";\n\nfunction DefaultProvider({ children }: { children: ReactNode }) {\n return <>{children}</>;\n}\n\nconst THEME_INIT_SCRIPT = String.raw`\n(function () {\n try {\n var storageKey = \"silica-theme\";\n var root = document.documentElement;\n var stored = window.localStorage.getItem(storageKey);\n var theme =\n stored === \"dark\" || stored === \"light\"\n ? stored\n : window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n ? \"dark\"\n : \"light\";\n\n root.classList.remove(\"dark\", \"light\");\n root.classList.add(theme);\n } catch (_) {}\n})();\n`;\n\nexport function Layout({\n navigation,\n config,\n children,\n Provider = DefaultProvider,\n}: ThemeLayoutProps) {\n return (\n <html lang=\"en\" suppressHydrationWarning>\n <head>\n <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />\n </head>\n <body className=\"min-h-svh bg-background font-sans text-foreground antialiased\">\n <Provider>\n <SidebarProvider>\n <Sidebar navigation={navigation} config={config} />\n <SidebarInset>\n <header className=\"sticky top-0 z-10 flex h-12 shrink-0 items-center gap-2 border-b border-border bg-background px-3 md:hidden\">\n <SidebarTrigger />\n <SilicaLink\n href=\"/\"\n className=\"truncate text-sm font-semibold tracking-tight text-foreground\"\n >\n {config.title}\n </SilicaLink>\n </header>\n {children}\n </SidebarInset>\n </SidebarProvider>\n </Provider>\n </body>\n </html>\n );\n}\n\nexport function PageRenderer({ page, graph, manifest }: ThemePageProps) {\n const hasBreadcrumb = page.slug !== \"index\" && page.slug.includes(\"/\");\n return (\n <div className=\"mx-auto w-full max-w-6xl px-8 py-12 lg:grid lg:grid-cols-[minmax(0,1fr)_14rem] lg:gap-12\">\n <article className=\"min-w-0\">\n <header className=\"mb-10 flex flex-col gap-3\">\n {hasBreadcrumb ? (\n <Breadcrumbs\n slug={page.slug}\n allSlugs={manifest.allSlugs}\n className=\"text-xs\"\n />\n ) : null}\n <h1 className=\"text-4xl font-bold tracking-tight text-foreground\">\n {page.title}\n </h1>\n {page.description ? (\n <p className=\"text-lg leading-relaxed text-muted-foreground\">\n {page.description}\n </p>\n ) : null}\n <PageProperties frontmatter={page.frontmatter} />\n {page.entry.tags.length > 0 ? (\n <div className=\"flex flex-wrap gap-2 pt-1\">\n {page.entry.tags.map((tag) => (\n <SilicaLink\n key={tag}\n href={tagToHref(tag)}\n className=\"inline-flex h-6 items-center rounded-full border border-border px-2 text-xs text-muted-foreground transition-colors hover:border-primary/40 hover:text-foreground\"\n >\n <span className=\"text-muted-foreground/70\">#</span>\n <span className=\"ml-0.5\">{tag}</span>\n </SilicaLink>\n ))}\n </div>\n ) : null}\n </header>\n <div className=\"prose max-w-none\">{page.content}</div>\n <div className=\"mt-16\">\n <Backlinks graph={graph} slug={page.slug} manifest={manifest} />\n </div>\n </article>\n <aside className=\"mt-12 hidden lg:sticky lg:top-12 lg:mt-0 lg:block lg:self-start\">\n <TableOfContents toc={page.toc} />\n </aside>\n </div>\n );\n}\n\nexport const components = {\n \"silica-callout\": Callout,\n \"silica-code-block\": CodeBlock,\n \"silica-embed\": Embed,\n \"silica-mermaid\": Mermaid,\n};\n\nexport default { Layout, PageRenderer, components };\n"],"mappings":"AAuBS,wBAsCK,YAtCL;AAtBT,SAAS,iBAAiB;AAE1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AACtB,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,SAAS,gBAAgB,EAAE,SAAS,GAA4B;AAC9D,SAAO,gCAAG,UAAS;AACrB;AAEA,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB1B,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAqB;AACnB,SACE,qBAAC,UAAK,MAAK,MAAK,0BAAwB,MACtC;AAAA,wBAAC,UACC,8BAAC,YAAO,yBAAyB,EAAE,QAAQ,kBAAkB,GAAG,GAClE;AAAA,IACA,oBAAC,UAAK,WAAU,iEACd,8BAAC,YACC,+BAAC,mBACC;AAAA,0BAAC,WAAQ,YAAwB,QAAgB;AAAA,MACjD,qBAAC,gBACC;AAAA,6BAAC,YAAO,WAAU,+GAChB;AAAA,8BAAC,kBAAe;AAAA,UAChB;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cAET,iBAAO;AAAA;AAAA,UACV;AAAA,WACF;AAAA,QACC;AAAA,SACH;AAAA,OACF,GACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,aAAa,EAAE,MAAM,OAAO,SAAS,GAAmB;AACtE,QAAM,gBAAgB,KAAK,SAAS,WAAW,KAAK,KAAK,SAAS,GAAG;AACrE,SACE,qBAAC,SAAI,WAAU,4FACb;AAAA,yBAAC,aAAQ,WAAU,WACjB;AAAA,2BAAC,YAAO,WAAU,6BACf;AAAA,wBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,KAAK;AAAA,YACX,UAAU,SAAS;AAAA,YACnB,WAAU;AAAA;AAAA,QACZ,IACE;AAAA,QACJ,oBAAC,QAAG,WAAU,qDACX,eAAK,OACR;AAAA,QACC,KAAK,cACJ,oBAAC,OAAE,WAAU,iDACV,eAAK,aACR,IACE;AAAA,QACJ,oBAAC,kBAAe,aAAa,KAAK,aAAa;AAAA,QAC9C,KAAK,MAAM,KAAK,SAAS,IACxB,oBAAC,SAAI,WAAU,6BACZ,eAAK,MAAM,KAAK,IAAI,CAAC,QACpB;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM,UAAU,GAAG;AAAA,YACnB,WAAU;AAAA,YAEV;AAAA,kCAAC,UAAK,WAAU,4BAA2B,eAAC;AAAA,cAC5C,oBAAC,UAAK,WAAU,UAAU,eAAI;AAAA;AAAA;AAAA,UALzB;AAAA,QAMP,CACD,GACH,IACE;AAAA,SACN;AAAA,MACA,oBAAC,SAAI,WAAU,oBAAoB,eAAK,SAAQ;AAAA,MAChD,oBAAC,SAAI,WAAU,SACb,8BAAC,aAAU,OAAc,MAAM,KAAK,MAAM,UAAoB,GAChE;AAAA,OACF;AAAA,IACA,oBAAC,WAAM,WAAU,mEACf,8BAAC,mBAAgB,KAAK,KAAK,KAAK,GAClC;AAAA,KACF;AAEJ;AAEO,MAAM,aAAa;AAAA,EACxB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,kBAAkB;AACpB;AAEA,IAAO,gBAAQ,EAAE,QAAQ,cAAc,WAAW;","names":[]}
@@ -0,0 +1,9 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { HTMLAttributes } from 'react';
3
+
4
+ type MermaidProps = HTMLAttributes<HTMLElement> & {
5
+ "data-source"?: string;
6
+ };
7
+ declare function Mermaid({ children, className, "data-source": source, ...props }: MermaidProps): react_jsx_runtime.JSX.Element;
8
+
9
+ export { Mermaid, type MermaidProps };
@@ -0,0 +1,26 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { cn } from "@silicajs/ui/lib/utils";
3
+ function Mermaid({
4
+ children,
5
+ className,
6
+ "data-source": source,
7
+ ...props
8
+ }) {
9
+ return /* @__PURE__ */ jsx(
10
+ "figure",
11
+ {
12
+ ...props,
13
+ "data-slot": "mermaid",
14
+ "data-source": source,
15
+ className: cn(
16
+ "my-6 overflow-hidden rounded-lg border bg-muted/30",
17
+ className
18
+ ),
19
+ children: /* @__PURE__ */ jsx("pre", { className: "m-0 overflow-x-auto p-4 text-sm", children: source || children })
20
+ }
21
+ );
22
+ }
23
+ export {
24
+ Mermaid
25
+ };
26
+ //# sourceMappingURL=mermaid.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/mermaid.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cn } from \"@silicajs/ui/lib/utils\";\n\nexport type MermaidProps = HTMLAttributes<HTMLElement> & {\n \"data-source\"?: string;\n};\n\nexport function Mermaid({\n children,\n className,\n \"data-source\": source,\n ...props\n}: MermaidProps) {\n return (\n <figure\n {...props}\n data-slot=\"mermaid\"\n data-source={source}\n className={cn(\n \"my-6 overflow-hidden rounded-lg border bg-muted/30\",\n className,\n )}\n >\n <pre className=\"m-0 overflow-x-auto p-4 text-sm\">\n {source || children}\n </pre>\n </figure>\n );\n}\n"],"mappings":"AAuBM;AAtBN,SAAS,UAAU;AAMZ,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,GAAiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,SAAI,WAAU,mCACZ,oBAAU,UACb;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -0,0 +1,12 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { ThemeNavigationEntry, ThemeLayoutConfig } from '@silicajs/core/theme';
3
+
4
+ type SidebarProps = {
5
+ navigation: {
6
+ entries: ThemeNavigationEntry[];
7
+ };
8
+ config: ThemeLayoutConfig;
9
+ };
10
+ declare function Sidebar({ navigation, config }: SidebarProps): react_jsx_runtime.JSX.Element;
11
+
12
+ export { Sidebar, type SidebarProps };
@@ -0,0 +1,44 @@
1
+ "use client";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { Suspense } from "react";
4
+ import {
5
+ DarkModeToggle,
6
+ SearchTrigger,
7
+ SilicaLink,
8
+ UserMenu,
9
+ VaultTree
10
+ } from "@silicajs/components";
11
+ import {
12
+ Sidebar as ShadcnSidebar,
13
+ SidebarContent,
14
+ SidebarFooter,
15
+ SidebarGroup,
16
+ SidebarGroupContent,
17
+ SidebarHeader,
18
+ SidebarRail
19
+ } from "@silicajs/ui/components/sidebar";
20
+ function Sidebar({ navigation, config }) {
21
+ return /* @__PURE__ */ jsxs(ShadcnSidebar, { children: [
22
+ /* @__PURE__ */ jsxs(SidebarHeader, { className: "gap-3 border-b border-sidebar-border", children: [
23
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-1 pt-1", children: [
24
+ /* @__PURE__ */ jsx(
25
+ SilicaLink,
26
+ {
27
+ href: "/",
28
+ className: "truncate text-sm font-semibold tracking-tight text-foreground",
29
+ children: config.title
30
+ }
31
+ ),
32
+ /* @__PURE__ */ jsx(DarkModeToggle, {})
33
+ ] }),
34
+ /* @__PURE__ */ jsx("div", { className: "px-1 pb-1", children: /* @__PURE__ */ jsx(SearchTrigger, { className: "w-full justify-start" }) })
35
+ ] }),
36
+ /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(VaultTree, { entries: navigation.entries }) }) }) }),
37
+ config.authEnabled ? /* @__PURE__ */ jsx(SidebarFooter, { className: "border-t border-sidebar-border", children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(UserMenu, {}) }) }) : null,
38
+ /* @__PURE__ */ jsx(SidebarRail, {})
39
+ ] });
40
+ }
41
+ export {
42
+ Sidebar
43
+ };
44
+ //# sourceMappingURL=sidebar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Suspense } from \"react\";\nimport type {\n ThemeLayoutConfig,\n ThemeNavigationEntry,\n} from \"@silicajs/core/theme\";\nimport {\n DarkModeToggle,\n SearchTrigger,\n SilicaLink,\n UserMenu,\n VaultTree,\n} from \"@silicajs/components\";\nimport {\n Sidebar as ShadcnSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarHeader,\n SidebarRail,\n} from \"@silicajs/ui/components/sidebar\";\n\nexport type SidebarProps = {\n navigation: {\n entries: ThemeNavigationEntry[];\n };\n config: ThemeLayoutConfig;\n};\n\nexport function Sidebar({ navigation, config }: SidebarProps) {\n return (\n <ShadcnSidebar>\n <SidebarHeader className=\"gap-3 border-b border-sidebar-border\">\n <div className=\"flex items-center justify-between gap-2 px-1 pt-1\">\n <SilicaLink\n href=\"/\"\n className=\"truncate text-sm font-semibold tracking-tight text-foreground\"\n >\n {config.title}\n </SilicaLink>\n <DarkModeToggle />\n </div>\n <div className=\"px-1 pb-1\">\n <SearchTrigger className=\"w-full justify-start\" />\n </div>\n </SidebarHeader>\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupContent>\n <VaultTree entries={navigation.entries} />\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n {config.authEnabled ? (\n <SidebarFooter className=\"border-t border-sidebar-border\">\n <Suspense fallback={null}>\n <UserMenu />\n </Suspense>\n </SidebarFooter>\n ) : null}\n <SidebarRail />\n </ShadcnSidebar>\n );\n}\n"],"mappings":";AAmCQ,SACE,KADF;AAjCR,SAAS,gBAAgB;AAKzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASA,SAAS,QAAQ,EAAE,YAAY,OAAO,GAAiB;AAC5D,SACE,qBAAC,iBACC;AAAA,yBAAC,iBAAc,WAAU,wCACvB;AAAA,2BAAC,SAAI,WAAU,qDACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YAET,iBAAO;AAAA;AAAA,QACV;AAAA,QACA,oBAAC,kBAAe;AAAA,SAClB;AAAA,MACA,oBAAC,SAAI,WAAU,aACb,8BAAC,iBAAc,WAAU,wBAAuB,GAClD;AAAA,OACF;AAAA,IACA,oBAAC,kBACC,8BAAC,gBACC,8BAAC,uBACC,8BAAC,aAAU,SAAS,WAAW,SAAS,GAC1C,GACF,GACF;AAAA,IACC,OAAO,cACN,oBAAC,iBAAc,WAAU,kCACvB,8BAAC,YAAS,UAAU,MAClB,8BAAC,YAAS,GACZ,GACF,IACE;AAAA,IACJ,oBAAC,eAAY;AAAA,KACf;AAEJ;","names":[]}
@@ -0,0 +1,118 @@
1
+ @import "@silicajs/ui/globals.css";
2
+ @plugin "@tailwindcss/typography";
3
+
4
+ @source "../../ui/src/**/*.{ts,tsx}";
5
+ @source "../../components/src/**/*.{ts,tsx}";
6
+ @source "../src/**/*.{ts,tsx}";
7
+
8
+ /*
9
+ * Every neutral/foreground token we override must be declared in BOTH :root
10
+ * and .dark. Because the imported base globals.css declares its .dark { ... }
11
+ * BEFORE our :root { ... } in the compiled output, any :root override we leave
12
+ * out of .dark would leak its light value into <html class="dark"> via the
13
+ * tied-specificity, last-source-wins cascade rule.
14
+ */
15
+
16
+ :root {
17
+ --radius: 0.75rem;
18
+
19
+ /* Amethyst accents */
20
+ --primary: oklch(0.55 0.22 295);
21
+ --primary-foreground: oklch(0.99 0 0);
22
+ --ring: oklch(0.55 0.22 295 / 0.5);
23
+ --accent: oklch(0.96 0.04 295);
24
+ --accent-foreground: oklch(0.25 0.1 295);
25
+ --sidebar-primary: oklch(0.55 0.22 295);
26
+ --sidebar-primary-foreground: oklch(0.99 0 0);
27
+ --sidebar-accent: oklch(0.96 0.04 295);
28
+ --sidebar-accent-foreground: oklch(0.25 0.1 295);
29
+ --sidebar-ring: oklch(0.55 0.22 295 / 0.5);
30
+
31
+ /* Violet-tinted neutrals (shadcn "mauve" structure, hue shifted to 295). */
32
+ --foreground: oklch(0.145 0.008 295);
33
+ --card-foreground: oklch(0.145 0.008 295);
34
+ --popover-foreground: oklch(0.145 0.008 295);
35
+ --secondary: oklch(0.96 0.003 295);
36
+ --secondary-foreground: oklch(0.212 0.019 295);
37
+ --muted: oklch(0.96 0.003 295);
38
+ --muted-foreground: oklch(0.542 0.034 295);
39
+ --border: oklch(0.922 0.005 295);
40
+ --input: oklch(0.922 0.005 295);
41
+ --sidebar: var(--background);
42
+ --sidebar-foreground: oklch(0.145 0.008 295);
43
+ --sidebar-border: oklch(0.922 0.005 295);
44
+ }
45
+
46
+ .dark {
47
+ /* Amethyst accents */
48
+ --primary: oklch(0.72 0.18 295);
49
+ --primary-foreground: oklch(0.12 0.02 295);
50
+ --ring: oklch(0.72 0.18 295 / 0.4);
51
+ --accent: oklch(0.2 0.06 295);
52
+ --accent-foreground: oklch(0.96 0.04 295);
53
+ --sidebar-primary: oklch(0.72 0.18 295);
54
+ --sidebar-primary-foreground: oklch(0.12 0.02 295);
55
+ --sidebar-accent: oklch(0.2 0.06 295);
56
+ --sidebar-accent-foreground: oklch(0.96 0.04 295);
57
+ --sidebar-ring: oklch(0.72 0.18 295 / 0.4);
58
+
59
+ /* Violet-tinted neutrals — defensively re-declares every token our :root
60
+ touches so the base .dark values don't get overridden by our :root via
61
+ last-source-wins cascade. Foregrounds stay pure white; chroma in dark
62
+ mode is invisible above ~0.97 lightness anyway. */
63
+ --background: oklch(0.145 0.008 295);
64
+ --foreground: oklch(0.985 0 0);
65
+ --card: oklch(0.212 0.019 295);
66
+ --card-foreground: oklch(0.985 0 0);
67
+ --popover: oklch(0.212 0.019 295);
68
+ --popover-foreground: oklch(0.985 0 0);
69
+ --secondary: oklch(0.263 0.024 295);
70
+ --secondary-foreground: oklch(0.985 0 0);
71
+ --muted: oklch(0.263 0.024 295);
72
+ --muted-foreground: oklch(0.711 0.019 295);
73
+ --border: oklch(1 0 0 / 10%);
74
+ --input: oklch(1 0 0 / 15%);
75
+ --sidebar: var(--background);
76
+ --sidebar-foreground: oklch(0.985 0 0);
77
+ --sidebar-border: oklch(1 0 0 / 10%);
78
+ }
79
+
80
+ /*
81
+ * Map @tailwindcss/typography's prose tokens onto our theme tokens.
82
+ * NOT wrapped in @layer — the typography plugin emits its defaults
83
+ * unlayered, which would beat any @layer components override.
84
+ */
85
+ .prose {
86
+ --tw-prose-body: var(--foreground);
87
+ --tw-prose-headings: var(--foreground);
88
+ --tw-prose-lead: var(--muted-foreground);
89
+ --tw-prose-links: var(--primary);
90
+ --tw-prose-bold: var(--foreground);
91
+ --tw-prose-counters: var(--muted-foreground);
92
+ --tw-prose-bullets: var(--muted-foreground);
93
+ --tw-prose-hr: var(--border);
94
+ --tw-prose-quotes: var(--muted-foreground);
95
+ --tw-prose-quote-borders: var(--border);
96
+ --tw-prose-captions: var(--muted-foreground);
97
+ --tw-prose-code: var(--foreground);
98
+ --tw-prose-pre-code: var(--foreground);
99
+ --tw-prose-pre-bg: var(--muted);
100
+ --tw-prose-th-borders: var(--border);
101
+ --tw-prose-td-borders: var(--border);
102
+ --tw-prose-invert-body: var(--foreground);
103
+ --tw-prose-invert-headings: var(--foreground);
104
+ --tw-prose-invert-lead: var(--muted-foreground);
105
+ --tw-prose-invert-links: var(--primary);
106
+ --tw-prose-invert-bold: var(--foreground);
107
+ --tw-prose-invert-counters: var(--muted-foreground);
108
+ --tw-prose-invert-bullets: var(--muted-foreground);
109
+ --tw-prose-invert-hr: var(--border);
110
+ --tw-prose-invert-quotes: var(--muted-foreground);
111
+ --tw-prose-invert-quote-borders: var(--border);
112
+ --tw-prose-invert-captions: var(--muted-foreground);
113
+ --tw-prose-invert-code: var(--foreground);
114
+ --tw-prose-invert-pre-code: var(--foreground);
115
+ --tw-prose-invert-pre-bg: var(--muted);
116
+ --tw-prose-invert-th-borders: var(--border);
117
+ --tw-prose-invert-td-borders: var(--border);
118
+ }
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@silicajs/theme-amethyst",
3
+ "version": "0.1.0",
4
+ "description": "Amethyst theme for Silica — Tailwind v4 + Base UI, violet accent, Mintlify-style layout.",
5
+ "type": "module",
6
+ "license": "MIT",
7
+ "publishConfig": {
8
+ "access": "public"
9
+ },
10
+ "exports": {
11
+ ".": {
12
+ "types": "./dist/index.d.ts",
13
+ "import": "./dist/index.js"
14
+ },
15
+ "./styles.css": "./dist/styles.css"
16
+ },
17
+ "files": [
18
+ "dist"
19
+ ],
20
+ "scripts": {
21
+ "build": "tsup",
22
+ "typecheck": "tsc --noEmit",
23
+ "lint": "tsc --noEmit",
24
+ "test": "vitest run --passWithNoTests"
25
+ },
26
+ "dependencies": {
27
+ "@silicajs/components": "^0.1.0",
28
+ "@silicajs/core": "^0.1.0",
29
+ "@silicajs/ui": "^0.1.0",
30
+ "@tailwindcss/typography": "^0.5.18",
31
+ "class-variance-authority": "^0.7.1",
32
+ "lucide-react": "^1.16.0"
33
+ },
34
+ "peerDependencies": {
35
+ "react": "^19.2.0",
36
+ "react-dom": "^19.2.0"
37
+ },
38
+ "devDependencies": {
39
+ "@types/react": "^19.2.10",
40
+ "@types/react-dom": "^19.2.3",
41
+ "react": "^19.2.6",
42
+ "react-dom": "^19.2.6",
43
+ "tsup": "^8.5.1"
44
+ }
45
+ }