@epicbagel/saas-kit 0.0.0-stage → 1.1.0

package/dist/lib/filter-types.d.cts

@@ -0,0 +1,60 @@
+type FilterType = "enum" | "text" | "date" | "daterange" | "numberrange" | "boolean" | "number" | "multiselect" | "searchable-tags";
+interface FilterOption {
+    value: string;
+    label: string;
+}
+type FilterTransform = "eq" | "like" | "range" | "null" | "stock";
+interface FilterDefinition {
+    id: string;
+    label: string;
+    type: FilterType;
+    field: string;
+    placeholder?: string;
+    options?: FilterOption[];
+    icon?: any;
+    multiple?: boolean;
+    transform?: FilterTransform;
+    transformMap?: Record<string, any>;
+    /**
+     * Checkbox is the default for true-only flags: unchecked removes the filter.
+     * Tri-state renders Any / Yes / No when false is a meaningful query value.
+     */
+    booleanMode?: "checkbox" | "tri-state";
+    trueLabel?: string;
+    falseLabel?: string;
+}
+interface GraphQLFilterInput {
+    [key: string]: {
+        eq?: string | number | boolean;
+        like?: string;
+        in?: string[];
+        gt?: string | number;
+        gte?: string | number;
+        lt?: string | number;
+        lte?: string | number;
+        isNull?: boolean;
+        isNotNull?: boolean;
+    };
+}
+/**
+ * Transform UI filters to GraphQL filter variables
+ */
+declare function transformFiltersToVariables(filters: Record<string, any>, filterSchema: FilterDefinition[]): GraphQLFilterInput;
+/**
+ * Get active filter count
+ */
+declare function getActiveFilterCount(filters: Record<string, any>): number;
+/**
+ * Clear all filters
+ */
+declare function clearFilters(): Record<string, any>;
+/**
+ * Check if a filter is active
+ */
+declare function isFilterActive(filters: Record<string, any>, filterId: string): boolean;
+/**
+ * Get filter display value for badges/chips
+ */
+declare function getFilterDisplayValue(filters: Record<string, any>, filterSchema: FilterDefinition[], filterId: string): string | null;
+
+export { type FilterDefinition, type FilterOption, type FilterTransform, type FilterType, type GraphQLFilterInput, clearFilters, getActiveFilterCount, getFilterDisplayValue, isFilterActive, transformFiltersToVariables };

package/dist/lib/filter-types.d.ts

@@ -0,0 +1,60 @@
+type FilterType = "enum" | "text" | "date" | "daterange" | "numberrange" | "boolean" | "number" | "multiselect" | "searchable-tags";
+interface FilterOption {
+    value: string;
+    label: string;
+}
+type FilterTransform = "eq" | "like" | "range" | "null" | "stock";
+interface FilterDefinition {
+    id: string;
+    label: string;
+    type: FilterType;
+    field: string;
+    placeholder?: string;
+    options?: FilterOption[];
+    icon?: any;
+    multiple?: boolean;
+    transform?: FilterTransform;
+    transformMap?: Record<string, any>;
+    /**
+     * Checkbox is the default for true-only flags: unchecked removes the filter.
+     * Tri-state renders Any / Yes / No when false is a meaningful query value.
+     */
+    booleanMode?: "checkbox" | "tri-state";
+    trueLabel?: string;
+    falseLabel?: string;
+}
+interface GraphQLFilterInput {
+    [key: string]: {
+        eq?: string | number | boolean;
+        like?: string;
+        in?: string[];
+        gt?: string | number;
+        gte?: string | number;
+        lt?: string | number;
+        lte?: string | number;
+        isNull?: boolean;
+        isNotNull?: boolean;
+    };
+}
+/**
+ * Transform UI filters to GraphQL filter variables
+ */
+declare function transformFiltersToVariables(filters: Record<string, any>, filterSchema: FilterDefinition[]): GraphQLFilterInput;
+/**
+ * Get active filter count
+ */
+declare function getActiveFilterCount(filters: Record<string, any>): number;
+/**
+ * Clear all filters
+ */
+declare function clearFilters(): Record<string, any>;
+/**
+ * Check if a filter is active
+ */
+declare function isFilterActive(filters: Record<string, any>, filterId: string): boolean;
+/**
+ * Get filter display value for badges/chips
+ */
+declare function getFilterDisplayValue(filters: Record<string, any>, filterSchema: FilterDefinition[], filterId: string): string | null;
+
+export { type FilterDefinition, type FilterOption, type FilterTransform, type FilterType, type GraphQLFilterInput, clearFilters, getActiveFilterCount, getFilterDisplayValue, isFilterActive, transformFiltersToVariables };

package/dist/lib/filter-types.js

@@ -0,0 +1,160 @@
+import {
+  formatDateOnly
+} from "../chunk-CS7DM3NV.js";
+
+// src/lib/filter-types.ts
+function toDateString(value) {
+  if (!value) return null;
+  let d;
+  if (value instanceof Date) {
+    d = value;
+  } else if (typeof value === "string") {
+    if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return value;
+    d = new Date(value);
+  } else {
+    return null;
+  }
+  if (isNaN(d.getTime())) return null;
+  return d.toISOString().split("T")[0] ?? null;
+}
+function transformFiltersToVariables(filters, filterSchema) {
+  const graphqlFilters = {};
+  for (const [filterId, value] of Object.entries(filters)) {
+    if (value === void 0 || value === null || value === "") {
+      continue;
+    }
+    const filterDef = filterSchema.find((f) => f.id === filterId);
+    if (!filterDef) continue;
+    const field = filterDef.field;
+    switch (filterDef.type) {
+      case "enum":
+        if (value) {
+          if (filterDef.transformMap && filterDef.transformMap[value]) {
+            graphqlFilters[field] = filterDef.transformMap[value];
+          } else {
+            graphqlFilters[field] = { eq: value };
+          }
+        }
+        break;
+      case "multiselect":
+        if (Array.isArray(value) && value.length > 0) {
+          graphqlFilters[field] = { in: value };
+        }
+        break;
+      case "text":
+        if (value && typeof value === "string") {
+          graphqlFilters[field] = { like: value };
+        }
+        break;
+      case "date":
+        if (value) {
+          if (typeof value === "object" && (value.start || value.from)) {
+            const rangeStart = value.start ?? value.from;
+            const rangeEnd = value.end ?? value.to;
+            const startDate = toDateString(rangeStart);
+            if (startDate && rangeEnd) {
+              const endDate = toDateString(rangeEnd);
+              if (endDate) {
+                graphqlFilters[field] = { gte: startDate, lte: endDate };
+              } else {
+                graphqlFilters[field] = { gte: startDate };
+              }
+            } else if (startDate) {
+              graphqlFilters[field] = { gte: startDate };
+            }
+          } else {
+            const dateString = toDateString(value);
+            if (dateString) {
+              graphqlFilters[field] = { eq: dateString };
+            }
+          }
+        }
+        break;
+      case "daterange":
+        if (value && typeof value === "object") {
+          const rangeFrom = value.from ?? value.start;
+          const rangeTo = value.to ?? value.end;
+          const fromStr = toDateString(rangeFrom);
+          if (fromStr) {
+            const toStr = toDateString(rangeTo);
+            if (toStr) {
+              graphqlFilters[field] = { gte: fromStr, lte: toStr };
+            } else {
+              graphqlFilters[field] = { gte: fromStr };
+            }
+          }
+        }
+        break;
+      case "boolean":
+        if (typeof value === "boolean") {
+          graphqlFilters[field] = { eq: value };
+        }
+        break;
+      case "number":
+        if (typeof value === "number") {
+          graphqlFilters[field] = { eq: value };
+        }
+        break;
+    }
+  }
+  return graphqlFilters;
+}
+function getActiveFilterCount(filters) {
+  return Object.values(filters).filter(
+    (value) => value !== void 0 && value !== "" && value !== null && !(Array.isArray(value) && value.length === 0)
+  ).length;
+}
+function clearFilters() {
+  return {};
+}
+function isFilterActive(filters, filterId) {
+  const value = filters[filterId];
+  return value !== void 0 && value !== "" && value !== null && !(Array.isArray(value) && value.length === 0);
+}
+function getFilterDisplayValue(filters, filterSchema, filterId) {
+  const value = filters[filterId];
+  const filterDef = filterSchema.find((f) => f.id === filterId);
+  if (!filterDef || !value) return null;
+  switch (filterDef.type) {
+    case "enum": {
+      const option = filterDef.options?.find((opt) => opt.value === value);
+      return option?.label || value;
+    }
+    case "multiselect":
+      if (Array.isArray(value)) {
+        return value.map((v) => {
+          const option = filterDef.options?.find((opt) => opt.value === v);
+          return option?.label || v;
+        }).join(", ");
+      }
+      return null;
+    case "text":
+      return value;
+    case "date":
+    case "daterange": {
+      const rangeStart = value?.start ?? value?.from;
+      const rangeEnd = value?.end ?? value?.to;
+      if (rangeStart && rangeEnd) {
+        const startStr = rangeStart instanceof Date ? formatDateOnly(rangeStart) : rangeStart;
+        const endStr = rangeEnd instanceof Date ? formatDateOnly(rangeEnd) : rangeEnd;
+        return `${startStr} \u2013 ${endStr}`;
+      } else if (rangeStart) {
+        return rangeStart instanceof Date ? formatDateOnly(rangeStart) : rangeStart;
+      } else if (value instanceof Date) {
+        return formatDateOnly(value);
+      }
+      return value;
+    }
+    case "boolean":
+      return value ? "Yes" : "No";
+    default:
+      return String(value);
+  }
+}
+export {
+  clearFilters,
+  getActiveFilterCount,
+  getFilterDisplayValue,
+  isFilterActive,
+  transformFiltersToVariables
+};

package/dist/lib/neutral-theme.cjs

@@ -0,0 +1,238 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+// src/lib/neutral-theme.ts
+var SEMANTIC_TOKENS = [
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring",
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5",
+  "sidebar-background",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring"
+];
+function hexToRgb(hex) {
+  const h = hex.replace("#", "").trim();
+  const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  if (!/^[0-9a-fA-F]{6}$/.test(full)) {
+    throw new Error(`Not a hex colour: ${hex}`);
+  }
+  return [
+    parseInt(full.slice(0, 2), 16),
+    parseInt(full.slice(2, 4), 16),
+    parseInt(full.slice(4, 6), 16)
+  ];
+}
+function hexToHsl(hex) {
+  const [r255, g255, b255] = hexToRgb(hex);
+  const r = r255 / 255;
+  const g = g255 / 255;
+  const b = b255 / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  const d = max - min;
+  let h = 0;
+  let s = 0;
+  if (d !== 0) {
+    s = d / (1 - Math.abs(2 * l - 1));
+    if (max === r) h = (g - b) / d % 6;
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  const round = (n) => Math.round(n * 10) / 10;
+  return `${round(h)} ${round(s * 100)}% ${round(l * 100)}%`;
+}
+function luminance(hex) {
+  const [r, g, b] = hexToRgb(hex).map((v) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function contrastRatio(a, b) {
+  const la = luminance(a);
+  const lb = luminance(b);
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+  return (hi + 0.05) / (lo + 0.05);
+}
+function bestForeground(bg, candidates) {
+  let best = candidates[0];
+  let bestRatio = 0;
+  for (const c of candidates) {
+    const ratio = contrastRatio(bg, c);
+    if (ratio > bestRatio) {
+      best = c;
+      bestRatio = ratio;
+    }
+  }
+  return best;
+}
+var NEUTRAL_RADIUS = "0rem";
+function neutral(mode) {
+  const light = mode === "light";
+  const danger = "#d71921";
+  const mono = light ? {
+    bg: "#ffffff",
+    fg: "#000000",
+    surface: "#f5f5f5",
+    subtle: "#666666",
+    border: "#e5e5e5",
+    sidebar: "#fafafa",
+    strong: "#333333"
+  } : {
+    bg: "#000000",
+    fg: "#ffffff",
+    surface: "#1a1a1a",
+    subtle: "#999999",
+    border: "#333333",
+    sidebar: "#0d0d0d",
+    strong: "#cccccc"
+  };
+  return {
+    background: mono.bg,
+    foreground: mono.fg,
+    card: mono.bg,
+    "card-foreground": mono.fg,
+    popover: mono.bg,
+    "popover-foreground": mono.fg,
+    primary: mono.fg,
+    "primary-foreground": mono.bg,
+    secondary: mono.surface,
+    "secondary-foreground": mono.fg,
+    muted: mono.surface,
+    "muted-foreground": mono.subtle,
+    accent: mono.surface,
+    "accent-foreground": mono.fg,
+    destructive: danger,
+    "destructive-foreground": bestForeground(danger, ["#ffffff", "#000000"]),
+    border: mono.border,
+    input: mono.border,
+    ring: mono.fg,
+    "chart-1": light ? "#333333" : "#cccccc",
+    "chart-2": light ? "#4d4d4d" : "#b3b3b3",
+    "chart-3": light ? "#666666" : "#999999",
+    "chart-4": light ? "#808080" : "#808080",
+    "chart-5": light ? "#999999" : "#666666",
+    "sidebar-background": mono.sidebar,
+    "sidebar-foreground": mono.fg,
+    "sidebar-primary": mono.fg,
+    "sidebar-primary-foreground": mono.bg,
+    "sidebar-accent": mono.surface,
+    "sidebar-accent-foreground": mono.fg,
+    "sidebar-border": mono.border,
+    "sidebar-ring": mono.border
+  };
+}
+var NEUTRAL = {
+  light: neutral("light"),
+  dark: neutral("dark")
+};
+function colorAlias(token) {
+  if (token.startsWith("chart-")) return null;
+  if (token === "sidebar-background") return "--color-sidebar";
+  return `--color-${token}`;
+}
+function paletteDeclarations(tokens, names, radius, { indent = "  ", aliasSource = "neutral-theme.ts" } = {}) {
+  const value = (token) => {
+    const hex = tokens[token];
+    if (hex === void 0) throw new Error(`Missing token: ${token}`);
+    return hexToHsl(hex);
+  };
+  const lines = [`${indent}--radius: ${radius};`];
+  for (const token of names) {
+    lines.push(`${indent}--${token}: ${value(token)};`);
+  }
+  lines.push(`${indent}--sidebar: ${value("sidebar-background")};`);
+  lines.push(`${indent}/* Tailwind-facing aliases \u2014 see ${aliasSource} */`);
+  for (const token of names) {
+    const alias = colorAlias(token);
+    if (alias) lines.push(`${indent}${alias}: hsl(var(--${token}));`);
+  }
+  lines.push(`${indent}--radius-sm: calc(var(--radius) - 4px);`);
+  lines.push(`${indent}--radius-md: calc(var(--radius) - 2px);`);
+  lines.push(`${indent}--radius-lg: var(--radius);`);
+  lines.push(`${indent}--radius-xl: calc(var(--radius) + 4px);`);
+  lines.push(`${indent}--radius-2xl: calc(var(--radius) + 8px);`);
+  return lines.join("\n");
+}
+function paletteBlock(selector, declarations, indent = "") {
+  const head = selector.split("\n").map((line) => indent + line).join("\n");
+  return `${head} {
+${declarations}
+${indent}}
+`;
+}
+function layerBlock(name, rules) {
+  return `@layer ${name} {
+${rules.join("\n")}}
+`;
+}
+var DARK_ROOT_SELECTOR = ":root:where(.dark)";
+function baseLayerPalette(light, dark, indent = "  ") {
+  return layerBlock("base", [
+    paletteBlock(":root", light, indent),
+    paletteBlock(DARK_ROOT_SELECTOR, dark, indent)
+  ]);
+}
+var PALETTE_GENERATED_HEADER = `/* GENERATED FILE \u2014 do not edit.
+ * Source: src/lib/neutral-theme.ts \xB7 Regenerate: pnpm gen:themes
+ *
+ * The neutral palette: light on :root, dark when the root carries the
+ * \`.dark\` class. It sits in \`@layer base\`, so any unlayered palette rule
+ * or a host's own :root overrides wins on layer order alone. Imported by
+ * tokens.css; every --color-* alias and the radius scale are re-declared
+ * alongside the tokens they read.
+ */`;
+function renderPaletteCss() {
+  const declarations = (mode) => paletteDeclarations(NEUTRAL[mode], SEMANTIC_TOKENS, NEUTRAL_RADIUS, {
+    indent: "    "
+  });
+  return [
+    PALETTE_GENERATED_HEADER,
+    baseLayerPalette(declarations("light"), declarations("dark"))
+  ].join("\n");
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.NEUTRAL = NEUTRAL; exports.NEUTRAL_RADIUS = NEUTRAL_RADIUS; exports.PALETTE_GENERATED_HEADER = PALETTE_GENERATED_HEADER; exports.SEMANTIC_TOKENS = SEMANTIC_TOKENS; exports.baseLayerPalette = baseLayerPalette; exports.bestForeground = bestForeground; exports.colorAlias = colorAlias; exports.contrastRatio = contrastRatio; exports.hexToHsl = hexToHsl; exports.hexToRgb = hexToRgb; exports.layerBlock = layerBlock; exports.luminance = luminance; exports.paletteBlock = paletteBlock; exports.paletteDeclarations = paletteDeclarations; exports.renderPaletteCss = renderPaletteCss;

package/dist/lib/neutral-theme.d.cts

@@ -0,0 +1,92 @@
+/**
+ * The neutral palette, plus the token contract, colour maths and CSS
+ * rendering that every palette shares.
+ *
+ * Neutral is plain black and white with square corners. `pnpm gen:themes`
+ * renders it to `src/styles/palette.gen.css`, which `styles/tokens.css`
+ * imports, so a stylesheet built from tokens.css + utilities.css carries
+ * exactly one palette. `lib/themes` builds its default palette from the
+ * same `NEUTRAL` values, so the two cannot drift.
+ *
+ * Tokens are authored as **hex** because that is what a human can eyeball
+ * in review; `hexToHsl` converts them to the `H S% L%` triples the kit's
+ * `@theme` block wraps in `hsl()`.
+ */
+type ThemeMode = "light" | "dark";
+/**
+ * Semantic tokens — the contract every theme must satisfy in full.
+ * These are the names the kit's `@theme` block (styles/tokens/theme.css)
+ * maps to Tailwind colours (`bg-background`, `text-muted-foreground`, …).
+ *
+ * `sidebar-background` (not `sidebar`) is the real name: the `@theme`
+ * block maps `--color-sidebar: hsl(var(--sidebar-background))`.
+ */
+declare const SEMANTIC_TOKENS: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground", "border", "input", "ring", "chart-1", "chart-2", "chart-3", "chart-4", "chart-5", "sidebar-background", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring"];
+type SemanticToken = (typeof SEMANTIC_TOKENS)[number];
+/** Every semantic token, as a hex string (`#rrggbb`). */
+type SemanticTokenMap = Record<SemanticToken, string>;
+/** `#rrggbb` → `[r, g, b]`, each 0-255. */
+declare function hexToRgb(hex: string): [number, number, number];
+/**
+ * `#rrggbb` → the bare `H S% L%` triple the kit's CSS vars hold (they
+ * are wrapped in `hsl(...)` at the `@theme` layer, so the var itself
+ * must NOT include the function).
+ */
+declare function hexToHsl(hex: string): string;
+/** WCAG relative luminance. */
+declare function luminance(hex: string): number;
+/** WCAG contrast ratio between two hex colours (1–21). */
+declare function contrastRatio(a: string, b: string): number;
+/**
+ * Pick whichever candidate reads best on `bg`. Used for the *-foreground
+ * tokens so a palette author can't accidentally ship white-on-yellow —
+ * the choice is computed, not eyeballed.
+ */
+declare function bestForeground(bg: string, candidates: string[]): string;
+/** `--radius` for the neutral palette: square. */
+declare const NEUTRAL_RADIUS = "0rem";
+/** The neutral palette's semantic tokens, per mode, as hex. */
+declare const NEUTRAL: Readonly<Record<ThemeMode, SemanticTokenMap>>;
+/**
+ * The Tailwind colour name each token feeds, or null for tokens with no
+ * utility (the chart series are read directly as `var(--chart-1)`).
+ * Mirrors the kit's `@theme` block.
+ */
+declare function colorAlias(token: string): string | null;
+interface PaletteDeclarationOptions {
+    /** Prefix for every line. */
+    indent?: string;
+    /** File named by the aliases comment in the generated CSS. */
+    aliasSource?: string;
+}
+/**
+ * The declarations of one palette block: `--radius`, each token as an
+ * `H S% L%` triple, the `--sidebar` alias, then the Tailwind-facing
+ * aliases and the radius scale.
+ */
+declare function paletteDeclarations(tokens: Readonly<Record<string, string>>, names: readonly string[], radius: string, { indent, aliasSource }?: PaletteDeclarationOptions): string;
+/**
+ * One rule: `selector { declarations }`, newline-terminated. `indent`
+ * prefixes each selector line and the closing brace, for a rule nested in
+ * a layer; the declarations carry their own indent.
+ */
+declare function paletteBlock(selector: string, declarations: string, indent?: string): string;
+/** Rules wrapped in a cascade layer: `@layer <name> { … }`. */
+declare function layerBlock(name: string, rules: readonly string[]): string;
+/**
+ * `@layer base { :root { light } :root:where(.dark) { dark } }` — the shape
+ * of a default palette. Layered so that anything unlayered (a palette
+ * scoped by an attribute, a host's own `:root` overrides) wins on layer
+ * order, not on specificity or import order.
+ *
+ * Both halves sit on the root only, like the mode itself: an element
+ * further down that happens to carry `.dark` inherits the document's
+ * tokens rather than having the default palette re-declared on it, which
+ * would paint over whichever palette the document picked.
+ */
+declare function baseLayerPalette(light: string, dark: string, indent?: string): string;
+declare const PALETTE_GENERATED_HEADER = "/* GENERATED FILE \u2014 do not edit.\n * Source: src/lib/neutral-theme.ts \u00B7 Regenerate: pnpm gen:themes\n *\n * The neutral palette: light on :root, dark when the root carries the\n * `.dark` class. It sits in `@layer base`, so any unlayered palette rule\n * or a host's own :root overrides wins on layer order alone. Imported by\n * tokens.css; every --color-* alias and the radius scale are re-declared\n * alongside the tokens they read.\n */";
+/** `src/styles/palette.gen.css`: the neutral palette, light then dark. */
+declare function renderPaletteCss(): string;
+
+export { NEUTRAL, NEUTRAL_RADIUS, PALETTE_GENERATED_HEADER, type PaletteDeclarationOptions, SEMANTIC_TOKENS, type SemanticToken, type SemanticTokenMap, type ThemeMode, baseLayerPalette, bestForeground, colorAlias, contrastRatio, hexToHsl, hexToRgb, layerBlock, luminance, paletteBlock, paletteDeclarations, renderPaletteCss };