@sepale/components 0.0.0-stage → 0.1.0

package/dist/components/file-icons.d.ts

@@ -0,0 +1,25 @@
+/**
+ * What a file looks like in a FileExplorer, by extension.
+ *
+ * An icon is a glyph — SVG markup drawn in a 24×24 box, stroked in
+ * `currentColor` — set inside a page outline, and the colour of the whole.
+ * The table maps a lower-case extension, without its dot, to an icon; the
+ * explorer merges yours over this one, so a single entry overrides a single
+ * extension.
+ */
+export interface FileIcon {
+    /** SVG markup inside the page, in a 24×24 box. Empty: the bare page. */
+    glyph: string;
+    /** Any CSS colour. Defaults to the explorer's muted ink. */
+    color?: string;
+    /** Draw the glyph alone, without the page around it. */
+    bare?: boolean;
+}
+/** The page every file icon is drawn on. */
+export declare const PAGE = "<path d=\"M6 3h8l4 4v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z\"/><path d=\"M14 3v4h4\"/>";
+/** The default table: the usual extensions, by family of file. */
+export declare const FILE_ICONS: Record<string, FileIcon>;
+/** Extensions shown as a picture when the file has a URL. */
+export declare const IMAGE_EXTENSIONS: Set<string>;
+/** `photo.JPG` → `jpg`; no dot → `''`. */
+export declare function extensionOf(name: string): string;

package/dist/components/file-icons.js

@@ -0,0 +1,46 @@
+/**
+ * What a file looks like in a FileExplorer, by extension.
+ *
+ * An icon is a glyph — SVG markup drawn in a 24×24 box, stroked in
+ * `currentColor` — set inside a page outline, and the colour of the whole.
+ * The table maps a lower-case extension, without its dot, to an icon; the
+ * explorer merges yours over this one, so a single entry overrides a single
+ * extension.
+ */
+/** The page every file icon is drawn on. */
+export const PAGE = '<path d="M6 3h8l4 4v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z"/><path d="M14 3v4h4"/>';
+const group = (exts, icon) => Object.fromEntries(exts.split(' ').map((e) => [e, icon]));
+const IMAGE = { color: '#a855f7', glyph: '<circle cx="9.5" cy="11" r="1.3"/><path d="m7.5 18 3-3.2 2 2 1.8-1.8 2.2 3"/>' };
+const VIDEO = { color: '#ef4444', glyph: '<path d="M10 11.5v5l4-2.5z"/>' };
+const AUDIO = { color: '#ec4899', glyph: '<path d="M10.5 17V11l4-1v5.5"/><circle cx="9.3" cy="17" r="1.2"/><circle cx="13.3" cy="15.5" r="1.2"/>' };
+const ARCHIVE = { color: '#d97706', glyph: '<path d="M11 4v2m0 2v2m0 2v2"/><rect x="9.8" y="14" width="2.4" height="3" rx=".6"/>' };
+const PDF = { color: '#dc2626', glyph: '<path d="M8.5 17.5c2-1 4.5-5.5 4-7.5-.4-1.4-2-.6-1.3 1.2.8 2.2 3 4.7 4.8 4.8 1.4.1 1.2-1.4-.6-1.4-1.7 0-4.8 1-6.9 2.9"/>' };
+const DOC = { color: '#2563eb', glyph: '<path d="M8.5 11h7M8.5 14h7M8.5 17h4.5"/>' };
+const SHEET = { color: '#16a34a', glyph: '<path d="M8.5 11h7v6h-7zM8.5 14h7M12 11v6"/>' };
+const SLIDES = { color: '#ea580c', glyph: '<rect x="8.5" y="11" width="7" height="5" rx=".6"/><path d="M12 16v2"/>' };
+const CODE = { color: '#0d9488', glyph: '<path d="m10 11.5-2 2 2 2m4-4 2 2-2 2"/>' };
+const DATA = { color: '#0891b2', glyph: '<path d="M10.5 11c-1 0-1 .8-1 1.6s-.6 1.4-1 1.4c.4 0 1 .6 1 1.4s0 1.6 1 1.6m3-6c1 0 1 .8 1 1.6s.6 1.4 1 1.4c-.4 0-1 .6-1 1.4s0 1.6-1 1.6"/>' };
+const TEXT = { color: '#64748b', glyph: '<path d="M8.5 11h7M8.5 14h7M8.5 17h7"/>' };
+const FONT = { color: '#7c3aed', glyph: '<path d="m9 17.5 3-7 3 7m-5-2.2h4"/>' };
+/** The default table: the usual extensions, by family of file. */
+export const FILE_ICONS = {
+    ...group('png jpg jpeg gif webp avif svg bmp ico tif tiff heic', IMAGE),
+    ...group('mp4 mov webm mkv avi m4v', VIDEO),
+    ...group('mp3 wav ogg flac m4a aac', AUDIO),
+    ...group('zip rar 7z tar gz tgz bz2 xz', ARCHIVE),
+    ...group('pdf', PDF),
+    ...group('doc docx odt rtf pages', DOC),
+    ...group('xls xlsx ods numbers', SHEET),
+    ...group('ppt pptx odp key', SLIDES),
+    ...group('js mjs cjs ts tsx jsx svelte vue html css scss py rb go rs java c cpp h php sh', CODE),
+    ...group('json csv tsv xml yaml yml toml sql', DATA),
+    ...group('txt md log ini env', TEXT),
+    ...group('ttf otf woff woff2', FONT)
+};
+/** Extensions shown as a picture when the file has a URL. */
+export const IMAGE_EXTENSIONS = new Set('png jpg jpeg gif webp avif svg bmp ico'.split(' '));
+/** `photo.JPG` → `jpg`; no dot → `''`. */
+export function extensionOf(name) {
+    const dot = name.lastIndexOf('.');
+    return dot > 0 ? name.slice(dot + 1).toLowerCase() : '';
+}

package/dist/family-types.d.ts

@@ -0,0 +1,45 @@
+/**
+ * family-types.ts — the `.d.ts` a family's stylesheet carries (ADR 0015).
+ *
+ * One function, three callers: the build (scripts/gen-components.mjs, for every
+ * family in src/scss), the app (a family loaded from disk, in its bundle), and
+ * anyone holding only a stylesheet. The text is DERIVED from the family's
+ * classification — which axis value, flag or part each of its classes is — and
+ * never written by hand: a hand-written declaration could promise a variant the
+ * stylesheet does not draw.
+ *
+ * Plain TypeScript with no imports and no syntax beyond annotations, so Node
+ * runs it as it is (type stripping) and the browser gets it through Vite.
+ */
+/** How a component accounts for one class (src/lib/generated/components.ts). */
+export interface ClassKind {
+    kind: string;
+    component?: string;
+    axis?: string;
+    value?: string;
+}
+/** What one component declares: its namespace and its flag suffixes. */
+export interface ComponentDecl {
+    prefix: string;
+    flags: string[];
+}
+/** What a family ships, per component namespace. */
+export type FamilyShape = Record<string, {
+    /** axis → the values whose class the family draws. */
+    axes: Record<string, string[]>;
+    /** Flag class suffixes the family draws (`image-full`). */
+    flags: string[];
+    /** Whether the family reads the `--<prefix>-bg` slot `background` writes. */
+    background: boolean;
+}>;
+/**
+ * A family's shape, from its classified classes and its stylesheet. A component
+ * appears as soon as the family draws any class of it; one it does not style at
+ * all is absent, and so are its props.
+ */
+export declare function familyShape(classes: Record<string, ClassKind>, schema: Record<string, ComponentDecl>, css: string): FamilyShape;
+/**
+ * The text of `<family>.css.d.ts`: the family registered in the global
+ * `Sepale.Families` interface that `AxisProps` (variants.ts) reads.
+ */
+export declare function familyTypes(family: string, shape: FamilyShape): string;

package/dist/family-types.js

@@ -0,0 +1,73 @@
+/**
+ * family-types.ts — the `.d.ts` a family's stylesheet carries (ADR 0015).
+ *
+ * One function, three callers: the build (scripts/gen-components.mjs, for every
+ * family in src/scss), the app (a family loaded from disk, in its bundle), and
+ * anyone holding only a stylesheet. The text is DERIVED from the family's
+ * classification — which axis value, flag or part each of its classes is — and
+ * never written by hand: a hand-written declaration could promise a variant the
+ * stylesheet does not draw.
+ *
+ * Plain TypeScript with no imports and no syntax beyond annotations, so Node
+ * runs it as it is (type stripping) and the browser gets it through Vite.
+ */
+/**
+ * A family's shape, from its classified classes and its stylesheet. A component
+ * appears as soon as the family draws any class of it; one it does not style at
+ * all is absent, and so are its props.
+ */
+export function familyShape(classes, schema, css) {
+    const shape = {};
+    for (const [cls, info] of Object.entries(classes)) {
+        const decl = info.component ? schema[info.component] : undefined;
+        if (!decl)
+            continue;
+        const { prefix } = decl;
+        const e = (shape[prefix] ??= { axes: {}, flags: [], background: css.includes(`var(--${prefix}-bg`) });
+        if (info.kind === 'axis' && info.axis && info.value !== undefined) {
+            (e.axes[info.axis] ??= []).push(info.value);
+        }
+        else if (info.kind === 'flag') {
+            const suffix = cls.slice(prefix.length + 1);
+            if (decl.flags.includes(suffix))
+                e.flags.push(suffix);
+        }
+    }
+    for (const e of Object.values(shape)) {
+        for (const values of Object.values(e.axes))
+            values.sort();
+        e.flags.sort();
+    }
+    return shape;
+}
+const q = (s) => `'${s.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`;
+const union = (values) => (values.length ? values.map(q).join(' | ') : 'never');
+/**
+ * The text of `<family>.css.d.ts`: the family registered in the global
+ * `Sepale.Families` interface that `AxisProps` (variants.ts) reads.
+ */
+export function familyTypes(family, shape) {
+    const T = '\t';
+    const lines = [
+        `// ${family}.css — what this family draws, for @sepale/components.`,
+        `// Generated from the stylesheet (ADR 0015): do not edit, regenerate it.`,
+        `//`,
+        `// Importing the stylesheet registers it: \`import '<path>/${family}.css'\` in any`,
+        `// file narrows every component's props to what ${family} ships. To register it`,
+        `// for its types only: \`import type {} from '<path>/${family}.css'\`.`,
+        ``,
+        `declare global {`,
+        `${T}namespace Sepale {`,
+        `${T}${T}interface Families {`,
+        `${T}${T}${T}${q(family)}: {`
+    ];
+    for (const [prefix, { axes, flags, background }] of Object.entries(shape).sort(([a], [b]) => a.localeCompare(b))) {
+        const axisText = Object.entries(axes)
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([axis, values]) => `${q(axis)}: ${union(values)}`)
+            .join('; ');
+        lines.push(`${T}${T}${T}${T}${q(prefix)}: { axes: { ${axisText}${axisText ? ' ' : ''}}; flags: ${union(flags)}; background: ${background} };`);
+    }
+    lines.push(`${T}${T}${T}};`, `${T}${T}}`, `${T}}`, `}`, ``, `export {};`, ``);
+    return lines.join('\n');
+}

package/dist/generated/classes.d.ts

@@ -0,0 +1,17 @@
+/** How a component accounts for one of its classes. */
+export interface ClassInfo {
+    kind: 'root' | 'axis' | 'flag' | 'part' | 'unclassified';
+    /** The wrapper that owns it, if there is one. */
+    component?: string;
+    /** kind 'axis': the axis it belongs to, and the prop value that writes it. */
+    axis?: string;
+    value?: string;
+    /** kind 'flag': the boolean prop that writes it. */
+    prop?: string;
+}
+/** class name → what that class is. */
+export declare const classes: Record<string, ClassInfo>;
+/** component → axis → the values it accepts. */
+export declare const axes: Record<string, Record<string, string[]>>;
+/** component → the boolean props it accepts. */
+export declare const flags: Record<string, string[]>;