@karni/ui 0.0.0-stage → 0.3.1

package/dist/src/schema/provider.d.ts

@@ -0,0 +1,13 @@
+import { QueryClient } from '@tanstack/react-query';
+import { ReactElement, ReactNode } from 'react';
+import { KarniClient } from './client';
+export interface KarniProviderProps {
+    client: KarniClient;
+    /** Bring your own QueryClient; one is created (once) when omitted. */
+    queryClient?: QueryClient;
+    children?: ReactNode;
+}
+/** Provides the Karni client and a TanStack QueryClient to everything inside it; render it once at the app root. */
+export declare function KarniProvider(props: KarniProviderProps): ReactElement;
+/** Returns the Karni client from `KarniProvider`; throws a descriptive error outside one. */
+export declare function useKarniClient(): KarniClient;

package/dist/src/schema/types.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Normalized schema registry types (karni-ui-contract.md "Schema client" + D1).
+ *
+ * The OpenAPI document served by the karni backend (drf-spectacular, OAS 3.0.3,
+ * COMPONENT_SPLIT_REQUEST=True per api contract B14) is parsed ONCE into these
+ * shapes; every generic component consumes FieldDef/ResourceSchema, never raw
+ * OpenAPI.
+ */
+export type FieldKind = "string" | "text" | "number" | "integer" | "boolean" | "date" | "datetime" | "enum" | "relation" | "file" | "json" | "array" | "unknown";
+/** Derived from the x-karni-relation vendor extension (api contract B13). */
+export interface RelationRef {
+    resource: string;
+    many: boolean;
+}
+export interface FieldDef {
+    name: string;
+    /** Humanized from the property name (or the schema `title` when present). */
+    label: string;
+    kind: FieldKind;
+    /** From the CREATE request body's required array only (D1). */
+    required: boolean;
+    /** Flagged readOnly OR present only in the response component (D1). */
+    readOnly: boolean;
+    /** Flagged writeOnly OR present only in the request component (D1). */
+    writeOnly: boolean;
+    nullable: boolean;
+    /** Enum members; BlankEnum's "" and NullEnum's null are never members (D1/D3). */
+    enumValues?: ReadonlyArray<string | number>;
+    /** Choice labels by value, from drf-spectacular's "* `value` - Label" description lines. */
+    enumLabels?: Readonly<Record<string, string>>;
+    /** The schema's `default` (a model default): forms start from it on create. */
+    default?: unknown;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    format?: string;
+    /** Schema `description`, surfaced as field help text. */
+    description?: string;
+    /** Present only when x-karni-relation was emitted (degrades gracefully). */
+    relation?: RelationRef;
+    /**
+     * Underlying pk value type of a relation field, derived from the property's
+     * own emitted type/format — never assumed (D3). Drives zodFor's relation
+     * value schema (uuid string vs integer).
+     */
+    relationValueType?: "uuid" | "integer" | "string";
+    /** Declaration order in the schema (response props first, request-only appended). */
+    order: number;
+}
+export interface OperationDef {
+    path: string;
+    method: "get" | "post" | "put" | "patch" | "delete";
+    operationId?: string;
+    /** Declared query parameter names — the filter bar derives from these (D5). */
+    queryParams: readonly string[];
+    /** Allowed expand keys when the expand param declares an enum (D5). */
+    expandEnum?: readonly string[];
+    /** True when the operation declares a `search` query parameter (api B14). */
+    hasSearch?: boolean;
+}
+export interface ResourceSchema {
+    /** Router prefix, e.g. "events" (from x-karni-resource). */
+    resource: string;
+    operations: {
+        list?: OperationDef;
+        detail?: OperationDef;
+        create?: OperationDef;
+        update?: OperationDef;
+        remove?: OperationDef;
+        /** `GET /<resource>/export/` — the list as a CSV/XLSX file (karni.transfer, P6). */
+        export?: OperationDef;
+        /** `POST /<resource>/import/` — the import flow (upload, preview, commit). */
+        import?: OperationDef;
+    };
+    /** Ordered by declaration; unknown constructs land as kind "unknown". */
+    fields: readonly FieldDef[];
+}
+/** The whole parsed registry; produced once per schema fetch by parseOpenApi. */
+export interface ParsedSchema {
+    /** Keyed by router prefix (x-karni-resource). */
+    resources: Record<string, ResourceSchema>;
+    /** From the schema root's x-karni-auth-mode (api B14); undefined when absent. */
+    authMode?: "jwt" | "session";
+}

package/dist/src/schema/useSchema.d.ts

@@ -0,0 +1,17 @@
+import { UseQueryResult } from '@tanstack/react-query';
+import { ParsedSchema, ResourceSchema } from './types';
+/** D4-pinned query key for the parsed schema document. */
+export declare const SCHEMA_QUERY_KEY: readonly ["karni", "$schema"];
+/**
+ * The whole parsed registry (resources + root x-karni-auth-mode). Internal to
+ * the package — the auth layer reads `data.authMode` from here; apps use
+ * useSchema(resource).
+ */
+export declare function useParsedSchema(): UseQueryResult<ParsedSchema>;
+export interface UseSchemaResult {
+    data: ResourceSchema | undefined;
+    isLoading: boolean;
+    error: unknown;
+}
+/** Returns one resource's parsed schema (fields, types, relations, operations) from the backend's OpenAPI document, fetched once per app. */
+export declare function useSchema(resource: string): UseSchemaResult;

package/dist/src/schema/zod.d.ts

@@ -0,0 +1,4 @@
+import { ZodObject, ZodRawShape } from 'zod';
+import { ResourceSchema } from './types';
+/** Builds a Zod validator for a resource's create or update payload from its schema. */
+export declare function zodFor(schema: ResourceSchema, mode: "create" | "update"): ZodObject<ZodRawShape>;

package/dist/styles.css

@@ -0,0 +1,87 @@
+/**
+ * @karni/ui design tokens.
+ *
+ * Every color used by @karni/ui components resolves to one of these
+ * custom properties (HSL triplets, consumed as `hsl(var(--karni-*) / <alpha>)`
+ * by the Tailwind preset). Override any token in your own stylesheet to
+ * retheme the whole library; add the `dark` class to <html> (or any ancestor)
+ * to switch to the dark palette.
+ */
+:root {
+  color-scheme: light;
+
+  --karni-background: 0 0% 100%;
+  --karni-foreground: 224 71.4% 4.1%;
+
+  --karni-card: 0 0% 100%;
+  --karni-card-foreground: 224 71.4% 4.1%;
+
+  --karni-popover: 0 0% 100%;
+  --karni-popover-foreground: 224 71.4% 4.1%;
+
+  --karni-primary: 220.9 39.3% 11%;
+  --karni-primary-foreground: 210 20% 98%;
+
+  --karni-secondary: 220 14.3% 95.9%;
+  --karni-secondary-foreground: 220.9 39.3% 11%;
+
+  --karni-muted: 220 14.3% 95.9%;
+  --karni-muted-foreground: 220 8.9% 46.1%;
+
+  --karni-accent: 220 14.3% 95.9%;
+  --karni-accent-foreground: 220.9 39.3% 11%;
+
+  --karni-destructive: 0 84.2% 60.2%;
+  --karni-destructive-foreground: 210 20% 98%;
+
+  --karni-border: 220 13% 91%;
+  --karni-input: 220 13% 91%;
+  --karni-ring: 224 71.4% 4.1%;
+
+  --karni-radius: 0.5rem;
+
+  /* DataChart series colors (chart-1 .. chart-5). */
+  --karni-chart-1: 220 70% 50%;
+  --karni-chart-2: 160 60% 45%;
+  --karni-chart-3: 30 80% 55%;
+  --karni-chart-4: 280 65% 60%;
+  --karni-chart-5: 340 75% 55%;
+}
+
+.dark {
+  color-scheme: dark;
+
+  --karni-background: 224 71.4% 4.1%;
+  --karni-foreground: 210 20% 98%;
+
+  --karni-card: 224 71.4% 4.1%;
+  --karni-card-foreground: 210 20% 98%;
+
+  --karni-popover: 224 71.4% 4.1%;
+  --karni-popover-foreground: 210 20% 98%;
+
+  --karni-primary: 210 20% 98%;
+  --karni-primary-foreground: 220.9 39.3% 11%;
+
+  --karni-secondary: 215 27.9% 16.9%;
+  --karni-secondary-foreground: 210 20% 98%;
+
+  --karni-muted: 215 27.9% 16.9%;
+  --karni-muted-foreground: 217.9 10.6% 64.9%;
+
+  --karni-accent: 215 27.9% 16.9%;
+  --karni-accent-foreground: 210 20% 98%;
+
+  --karni-destructive: 0 62.8% 30.6%;
+  --karni-destructive-foreground: 210 20% 98%;
+
+  --karni-border: 215 27.9% 16.9%;
+  --karni-input: 215 27.9% 16.9%;
+  --karni-ring: 216 12.2% 83.9%;
+
+  --karni-chart-1: 217 91% 60%;
+  --karni-chart-2: 160 60% 45%;
+  --karni-chart-3: 30 80% 55%;
+  --karni-chart-4: 280 65% 60%;
+  --karni-chart-5: 340 75% 55%;
+}

package/dist/tailwind-preset.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a={darkMode:"class",theme:{extend:{colors:{background:"hsl(var(--karni-background) / <alpha-value>)",foreground:"hsl(var(--karni-foreground) / <alpha-value>)",card:{DEFAULT:"hsl(var(--karni-card) / <alpha-value>)",foreground:"hsl(var(--karni-card-foreground) / <alpha-value>)"},popover:{DEFAULT:"hsl(var(--karni-popover) / <alpha-value>)",foreground:"hsl(var(--karni-popover-foreground) / <alpha-value>)"},primary:{DEFAULT:"hsl(var(--karni-primary) / <alpha-value>)",foreground:"hsl(var(--karni-primary-foreground) / <alpha-value>)"},secondary:{DEFAULT:"hsl(var(--karni-secondary) / <alpha-value>)",foreground:"hsl(var(--karni-secondary-foreground) / <alpha-value>)"},muted:{DEFAULT:"hsl(var(--karni-muted) / <alpha-value>)",foreground:"hsl(var(--karni-muted-foreground) / <alpha-value>)"},accent:{DEFAULT:"hsl(var(--karni-accent) / <alpha-value>)",foreground:"hsl(var(--karni-accent-foreground) / <alpha-value>)"},destructive:{DEFAULT:"hsl(var(--karni-destructive) / <alpha-value>)",foreground:"hsl(var(--karni-destructive-foreground) / <alpha-value>)"},border:"hsl(var(--karni-border) / <alpha-value>)",input:"hsl(var(--karni-input) / <alpha-value>)",ring:"hsl(var(--karni-ring) / <alpha-value>)",chart:{1:"hsl(var(--karni-chart-1) / <alpha-value>)",2:"hsl(var(--karni-chart-2) / <alpha-value>)",3:"hsl(var(--karni-chart-3) / <alpha-value>)",4:"hsl(var(--karni-chart-4) / <alpha-value>)",5:"hsl(var(--karni-chart-5) / <alpha-value>)"}},borderColor:{DEFAULT:"hsl(var(--karni-border) / <alpha-value>)"},borderRadius:{lg:"var(--karni-radius)",md:"calc(var(--karni-radius) - 2px)",sm:"calc(var(--karni-radius) - 4px)"}}}};exports.default=a;
+//# sourceMappingURL=tailwind-preset.cjs.map

package/dist/tailwind-preset.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-preset.cjs","sources":["../tailwind-preset.ts"],"sourcesContent":["/**\n * Tailwind (v3) preset for @karni/ui consumers.\n *\n * Usage (tailwind.config.ts of the consuming app):\n *\n * ```ts\n * import karniPreset from \"@karni/ui/tailwind-preset\";\n *\n * export default {\n *   presets: [karniPreset],\n *   content: [\n *     \"./src/**\\/*.{ts,tsx}\",\n *     \"./node_modules/@karni/ui/dist/**\\/*.js\",\n *   ],\n * };\n * ```\n *\n * Also import \"@karni/ui/styles.css\" once (it defines the --karni-* tokens).\n * Tailwind v4 users: see the README recipe (@source into dist) instead.\n */\nimport type { Config } from \"tailwindcss\";\n\nconst karniPreset = {\n  // `as const` keeps the literal type so the preset stays assignable to\n  // Config[\"presets\"] when consumers spread it into their own config.\n  darkMode: \"class\" as const,\n  theme: {\n    extend: {\n      colors: {\n        background: \"hsl(var(--karni-background) / <alpha-value>)\",\n        foreground: \"hsl(var(--karni-foreground) / <alpha-value>)\",\n        card: {\n          DEFAULT: \"hsl(var(--karni-card) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-card-foreground) / <alpha-value>)\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--karni-popover) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-popover-foreground) / <alpha-value>)\",\n        },\n        primary: {\n          DEFAULT: \"hsl(var(--karni-primary) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-primary-foreground) / <alpha-value>)\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--karni-secondary) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-secondary-foreground) / <alpha-value>)\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--karni-muted) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-muted-foreground) / <alpha-value>)\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--karni-accent) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-accent-foreground) / <alpha-value>)\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--karni-destructive) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-destructive-foreground) / <alpha-value>)\",\n        },\n        border: \"hsl(var(--karni-border) / <alpha-value>)\",\n        input: \"hsl(var(--karni-input) / <alpha-value>)\",\n        ring: \"hsl(var(--karni-ring) / <alpha-value>)\",\n        chart: {\n          \"1\": \"hsl(var(--karni-chart-1) / <alpha-value>)\",\n          \"2\": \"hsl(var(--karni-chart-2) / <alpha-value>)\",\n          \"3\": \"hsl(var(--karni-chart-3) / <alpha-value>)\",\n          \"4\": \"hsl(var(--karni-chart-4) / <alpha-value>)\",\n          \"5\": \"hsl(var(--karni-chart-5) / <alpha-value>)\",\n        },\n      },\n      borderColor: {\n        // A bare `border` class uses the token, never Tailwind's default gray.\n        DEFAULT: \"hsl(var(--karni-border) / <alpha-value>)\",\n      },\n      borderRadius: {\n        lg: \"var(--karni-radius)\",\n        md: \"calc(var(--karni-radius) - 2px)\",\n        sm: \"calc(var(--karni-radius) - 4px)\",\n      },\n    },\n  },\n} satisfies Omit<Config, \"content\">;\n\nexport default karniPreset;\n"],"names":["karniPreset"],"mappings":"4GAsBA,MAAMA,EAAc,CAGlB,SAAU,QACV,MAAO,CACL,OAAQ,CACN,OAAQ,CACN,WAAY,+CACZ,WAAY,+CACZ,KAAM,CACJ,QAAS,yCACT,WAAY,mDAAA,EAEd,QAAS,CACP,QAAS,4CACT,WAAY,sDAAA,EAEd,QAAS,CACP,QAAS,4CACT,WAAY,sDAAA,EAEd,UAAW,CACT,QAAS,8CACT,WAAY,wDAAA,EAEd,MAAO,CACL,QAAS,0CACT,WAAY,oDAAA,EAEd,OAAQ,CACN,QAAS,2CACT,WAAY,qDAAA,EAEd,YAAa,CACX,QAAS,gDACT,WAAY,0DAAA,EAEd,OAAQ,2CACR,MAAO,0CACP,KAAM,yCACN,MAAO,CACL,EAAK,4CACL,EAAK,4CACL,EAAK,4CACL,EAAK,4CACL,EAAK,2CAAA,CACP,EAEF,YAAa,CAEX,QAAS,0CAAA,EAEX,aAAc,CACZ,GAAI,sBACJ,GAAI,kCACJ,GAAI,iCAAA,CACN,CACF,CAEJ"}

package/dist/tailwind-preset.d.ts

@@ -0,0 +1,58 @@
+declare const karniPreset: {
+    darkMode: "class";
+    theme: {
+        extend: {
+            colors: {
+                background: string;
+                foreground: string;
+                card: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                popover: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                primary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                secondary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                muted: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                accent: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                destructive: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                border: string;
+                input: string;
+                ring: string;
+                chart: {
+                    "1": string;
+                    "2": string;
+                    "3": string;
+                    "4": string;
+                    "5": string;
+                };
+            };
+            borderColor: {
+                DEFAULT: string;
+            };
+            borderRadius: {
+                lg: string;
+                md: string;
+                sm: string;
+            };
+        };
+    };
+};
+export default karniPreset;

package/dist/tailwind-preset.js

@@ -0,0 +1,64 @@
+const a = {
+  // `as const` keeps the literal type so the preset stays assignable to
+  // Config["presets"] when consumers spread it into their own config.
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--karni-background) / <alpha-value>)",
+        foreground: "hsl(var(--karni-foreground) / <alpha-value>)",
+        card: {
+          DEFAULT: "hsl(var(--karni-card) / <alpha-value>)",
+          foreground: "hsl(var(--karni-card-foreground) / <alpha-value>)"
+        },
+        popover: {
+          DEFAULT: "hsl(var(--karni-popover) / <alpha-value>)",
+          foreground: "hsl(var(--karni-popover-foreground) / <alpha-value>)"
+        },
+        primary: {
+          DEFAULT: "hsl(var(--karni-primary) / <alpha-value>)",
+          foreground: "hsl(var(--karni-primary-foreground) / <alpha-value>)"
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--karni-secondary) / <alpha-value>)",
+          foreground: "hsl(var(--karni-secondary-foreground) / <alpha-value>)"
+        },
+        muted: {
+          DEFAULT: "hsl(var(--karni-muted) / <alpha-value>)",
+          foreground: "hsl(var(--karni-muted-foreground) / <alpha-value>)"
+        },
+        accent: {
+          DEFAULT: "hsl(var(--karni-accent) / <alpha-value>)",
+          foreground: "hsl(var(--karni-accent-foreground) / <alpha-value>)"
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--karni-destructive) / <alpha-value>)",
+          foreground: "hsl(var(--karni-destructive-foreground) / <alpha-value>)"
+        },
+        border: "hsl(var(--karni-border) / <alpha-value>)",
+        input: "hsl(var(--karni-input) / <alpha-value>)",
+        ring: "hsl(var(--karni-ring) / <alpha-value>)",
+        chart: {
+          1: "hsl(var(--karni-chart-1) / <alpha-value>)",
+          2: "hsl(var(--karni-chart-2) / <alpha-value>)",
+          3: "hsl(var(--karni-chart-3) / <alpha-value>)",
+          4: "hsl(var(--karni-chart-4) / <alpha-value>)",
+          5: "hsl(var(--karni-chart-5) / <alpha-value>)"
+        }
+      },
+      borderColor: {
+        // A bare `border` class uses the token, never Tailwind's default gray.
+        DEFAULT: "hsl(var(--karni-border) / <alpha-value>)"
+      },
+      borderRadius: {
+        lg: "var(--karni-radius)",
+        md: "calc(var(--karni-radius) - 2px)",
+        sm: "calc(var(--karni-radius) - 4px)"
+      }
+    }
+  }
+};
+export {
+  a as default
+};
+//# sourceMappingURL=tailwind-preset.js.map

package/dist/tailwind-preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-preset.js","sources":["../tailwind-preset.ts"],"sourcesContent":["/**\n * Tailwind (v3) preset for @karni/ui consumers.\n *\n * Usage (tailwind.config.ts of the consuming app):\n *\n * ```ts\n * import karniPreset from \"@karni/ui/tailwind-preset\";\n *\n * export default {\n *   presets: [karniPreset],\n *   content: [\n *     \"./src/**\\/*.{ts,tsx}\",\n *     \"./node_modules/@karni/ui/dist/**\\/*.js\",\n *   ],\n * };\n * ```\n *\n * Also import \"@karni/ui/styles.css\" once (it defines the --karni-* tokens).\n * Tailwind v4 users: see the README recipe (@source into dist) instead.\n */\nimport type { Config } from \"tailwindcss\";\n\nconst karniPreset = {\n  // `as const` keeps the literal type so the preset stays assignable to\n  // Config[\"presets\"] when consumers spread it into their own config.\n  darkMode: \"class\" as const,\n  theme: {\n    extend: {\n      colors: {\n        background: \"hsl(var(--karni-background) / <alpha-value>)\",\n        foreground: \"hsl(var(--karni-foreground) / <alpha-value>)\",\n        card: {\n          DEFAULT: \"hsl(var(--karni-card) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-card-foreground) / <alpha-value>)\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--karni-popover) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-popover-foreground) / <alpha-value>)\",\n        },\n        primary: {\n          DEFAULT: \"hsl(var(--karni-primary) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-primary-foreground) / <alpha-value>)\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--karni-secondary) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-secondary-foreground) / <alpha-value>)\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--karni-muted) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-muted-foreground) / <alpha-value>)\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--karni-accent) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-accent-foreground) / <alpha-value>)\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--karni-destructive) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-destructive-foreground) / <alpha-value>)\",\n        },\n        border: \"hsl(var(--karni-border) / <alpha-value>)\",\n        input: \"hsl(var(--karni-input) / <alpha-value>)\",\n        ring: \"hsl(var(--karni-ring) / <alpha-value>)\",\n        chart: {\n          \"1\": \"hsl(var(--karni-chart-1) / <alpha-value>)\",\n          \"2\": \"hsl(var(--karni-chart-2) / <alpha-value>)\",\n          \"3\": \"hsl(var(--karni-chart-3) / <alpha-value>)\",\n          \"4\": \"hsl(var(--karni-chart-4) / <alpha-value>)\",\n          \"5\": \"hsl(var(--karni-chart-5) / <alpha-value>)\",\n        },\n      },\n      borderColor: {\n        // A bare `border` class uses the token, never Tailwind's default gray.\n        DEFAULT: \"hsl(var(--karni-border) / <alpha-value>)\",\n      },\n      borderRadius: {\n        lg: \"var(--karni-radius)\",\n        md: \"calc(var(--karni-radius) - 2px)\",\n        sm: \"calc(var(--karni-radius) - 4px)\",\n      },\n    },\n  },\n} satisfies Omit<Config, \"content\">;\n\nexport default karniPreset;\n"],"names":["karniPreset"],"mappings":"AAsBA,MAAMA,IAAc;AAAA;AAAA;AAAA,EAGlB,UAAU;AAAA,EACV,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,WAAW;AAAA,UACT,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,QAAQ;AAAA,UACN,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,aAAa;AAAA,UACX,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,UACL,GAAK;AAAA,UACL,GAAK;AAAA,UACL,GAAK;AAAA,UACL,GAAK;AAAA,UACL,GAAK;AAAA,QAAA;AAAA,MACP;AAAA,MAEF,aAAa;AAAA;AAAA,QAEX,SAAS;AAAA,MAAA;AAAA,MAEX,cAAc;AAAA,QACZ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ;"}

package/eslint-plugin/index.js

@@ -0,0 +1,72 @@
+/**
+ * @karni/ui/eslint-plugin — Karni's frontend enforcement rules.
+ *
+ * Plain ESM, no build step; ships inside the @karni/ui package (enforcement
+ * contract §2 + F1, F15) and is consumed from flat config (ESLint >= 9):
+ *
+ *   // eslint.config.js
+ *   import karni from "@karni/ui/eslint-plugin";
+ *   export default [...karni.configs.recommended];
+ *
+ * Every rule fails the build ("error", never "warn"), and every rule's
+ * documented opt-out is ESLint's own disable comment WITH a required reason:
+ *
+ *   // eslint-disable-next-line karni/no-direct-http -- <reason>
+ *
+ * The reason requirement is enforced by
+ * @eslint-community/eslint-comments/require-description (a regular dependency
+ * of @karni/ui — eslint itself is only a peer), and unused disable directives
+ * are themselves errors (linterOptions.reportUnusedDisableDirectives).
+ */
+import eslintComments from "@eslint-community/eslint-plugin-eslint-comments";
+
+import maxPageLines from "./rules/max-page-lines.js";
+import noDeepImports from "./rules/no-deep-imports.js";
+import noDirectHttp from "./rules/no-direct-http.js";
+import noRawElements from "./rules/no-raw-elements.js";
+
+const plugin = {
+  meta: {
+    name: "@karni/ui/eslint-plugin",
+    version: "0.1.0",
+  },
+  rules: {
+    "no-raw-elements": noRawElements,
+    "max-page-lines": maxPageLines,
+    "no-deep-imports": noDeepImports,
+    "no-direct-http": noDirectHttp,
+  },
+  // Filled below so the config entries can reference the plugin object itself.
+  configs: {},
+};
+
+plugin.configs.recommended = [
+  {
+    name: "karni/recommended",
+    plugins: {
+      karni: plugin,
+      "@eslint-community/eslint-comments": eslintComments,
+    },
+    linterOptions: {
+      reportUnusedDisableDirectives: "error",
+    },
+    rules: {
+      "karni/no-raw-elements": "error",
+      "karni/max-page-lines": "error",
+      "karni/no-deep-imports": "error",
+      "karni/no-direct-http": "error",
+      // Every eslint-disable needs a `-- reason`; a bare opt-out is a failure.
+      "@eslint-community/eslint-comments/require-description": "error",
+    },
+  },
+  {
+    // Tests, mocks and vitest setup files stub the network by design.
+    name: "karni/recommended-test-files",
+    files: ["**/*.test.*", "**/mocks/**", "**/vitest.setup.*"],
+    rules: {
+      "karni/no-direct-http": "off",
+    },
+  },
+];
+
+export default plugin;

package/eslint-plugin/lib/docs.js

@@ -0,0 +1,11 @@
+/**
+ * Docs links for the rules. DOCS_BASE_URL must equal karni.errorcodes.DOCS_BASE_URL
+ * (packages/karni/tests/test_errorcodes.py checks it), and each rule's anchor is
+ * generated into docs/errors.md from ../rules.json.
+ */
+export const DOCS_BASE_URL = "https://cbsshekhawat18-lab.github.io/karni/";
+
+/** @param {string} rule rule name without the plugin prefix, e.g. "no-raw-elements" */
+export function docsUrl(rule) {
+  return `${DOCS_BASE_URL}errors/#karni-${rule}`;
+}

package/eslint-plugin/lib/glob.js

@@ -0,0 +1,51 @@
+/**
+ * Minimal glob matching for rule file-path options (no runtime dependency).
+ *
+ * Supported syntax (enough for the shipped defaults and documented options):
+ * - `**` matches any number of path segments (crosses `/`).
+ * - `*`  matches within a single path segment.
+ * - `?`  matches a single character within a segment.
+ *
+ * Paths are normalized to posix separators before matching, and a pattern
+ * matches if it matches the full path or any trailing sub-path, so a
+ * "**" + "/pages/" + "**" pattern works for absolute and relative filenames.
+ */
+
+const SPECIALS = /[.+^${}()|[\]\\]/g;
+
+/** @param {string} glob @returns {RegExp} */
+export function globToRegExp(glob) {
+  let out = "";
+  let i = 0;
+  while (i < glob.length) {
+    const ch = glob[i];
+    if (ch === "*") {
+      if (glob[i + 1] === "*") {
+        if (glob[i + 2] === "/") {
+          // `**/` — zero or more whole segments.
+          out += "(?:.*/)?";
+          i += 3;
+        } else {
+          out += ".*";
+          i += 2;
+        }
+      } else {
+        out += "[^/]*";
+        i += 1;
+      }
+    } else if (ch === "?") {
+      out += "[^/]";
+      i += 1;
+    } else {
+      out += ch.replace(SPECIALS, "\\$&");
+      i += 1;
+    }
+  }
+  return new RegExp(`(?:^|/)${out}$`);
+}
+
+/** @param {string} filename @param {readonly string[]} patterns @returns {boolean} */
+export function matchesAny(filename, patterns) {
+  const path = filename.replaceAll("\\", "/");
+  return patterns.some((pattern) => globToRegExp(pattern).test(path));
+}

package/eslint-plugin/rules/max-page-lines.js

@@ -0,0 +1,65 @@
+/**
+ * karni/max-page-lines — page files cap at 50 physical lines. A longer page
+ * is rebuilding something @karni/ui ships; reach for the component's props
+ * (columns, fields, slots) instead.
+ */
+import { docsUrl } from "../lib/docs.js";
+import { matchesAny } from "../lib/glob.js";
+
+const DEFAULT_MAX_LINES = 50;
+const DEFAULT_FILES = ["**/pages/**"];
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      url: docsUrl("max-page-lines"),
+      description:
+        "Fail page files (default **/pages/**) with more than 50 physical lines: pages compose @karni/ui components, they do not reimplement them.",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          maxLines: { type: "integer", minimum: 1 },
+          files: {
+            type: "array",
+            items: { type: "string" },
+            description: "Glob patterns of the files the cap applies to.",
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      tooLong:
+        "Page file is {{count}} physical lines (max {{max}}). Past the cap you are rebuilding " +
+        "something @karni/ui ships — compose Page/ResourceTable/ResourceForm/ResourceDetail and " +
+        "their props, or move logic into hooks/components. " +
+        "Opt out only with an explained disable: /* eslint-disable karni/max-page-lines -- <reason> */",
+    },
+  },
+
+  create(context) {
+    const options = context.options[0] ?? {};
+    const maxLines = options.maxLines ?? DEFAULT_MAX_LINES;
+    const files = options.files ?? DEFAULT_FILES;
+    if (!matchesAny(context.filename, files)) {
+      return {};
+    }
+    return {
+      Program(node) {
+        const lines = context.sourceCode.lines;
+        // A trailing newline produces one empty final element — not a line.
+        const count = lines.at(-1) === "" ? lines.length - 1 : lines.length;
+        if (count <= maxLines) return;
+        context.report({
+          node,
+          loc: { start: { line: 1, column: 0 }, end: { line: 1, column: 0 } },
+          messageId: "tooLong",
+          data: { count: String(count), max: String(maxLines) },
+        });
+      },
+    };
+  },
+};

package/eslint-plugin/rules/no-deep-imports.js

@@ -0,0 +1,61 @@
+/**
+ * karni/no-deep-imports — importing @karni/ui internals (dist/, src/) is
+ * banned. Deep imports are how component code gets vendored and forked;
+ * compose the public API instead, and if it does not fit, extend it through
+ * its props/overrides (or upstream the change).
+ */
+import { docsUrl } from "../lib/docs.js";
+const DEEP_IMPORT = /^@karni\/ui\/(?:dist|src)(?:\/|$)/;
+
+function checkSource(context, sourceNode) {
+  if (!sourceNode || sourceNode.type !== "Literal") return;
+  if (typeof sourceNode.value !== "string") return;
+  if (!DEEP_IMPORT.test(sourceNode.value)) return;
+  context.report({
+    node: sourceNode,
+    messageId: "deepImport",
+    data: { source: sourceNode.value },
+  });
+}
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      url: docsUrl("no-deep-imports"),
+      description:
+        "Ban imports from @karni/ui/dist/* and @karni/ui/src/*: compose the public API, never vendor a copy of an internal.",
+    },
+    schema: [],
+    messages: {
+      deepImport:
+        'Deep import "{{source}}" reaches into @karni/ui internals. Import from the public ' +
+        'barrel "@karni/ui" and compose/extend the exported component — vendoring an internal ' +
+        "copy forks it. " +
+        "Opt out only with an explained disable: " +
+        "// eslint-disable-next-line karni/no-deep-imports -- <reason>",
+    },
+  },
+
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        checkSource(context, node.source);
+      },
+      ExportNamedDeclaration(node) {
+        checkSource(context, node.source);
+      },
+      ExportAllDeclaration(node) {
+        checkSource(context, node.source);
+      },
+      ImportExpression(node) {
+        checkSource(context, node.source);
+      },
+      CallExpression(node) {
+        if (node.callee.type === "Identifier" && node.callee.name === "require") {
+          checkSource(context, node.arguments[0]);
+        }
+      },
+    };
+  },
+};