@karni/ui 0.0.0-stage → 0.4.0

package/dist/tailwind-preset.js

@@ -0,0 +1,183 @@
+//#region tailwind-preset.ts
+function e(e) {
+	return `color-mix(in srgb, var(--karni-color-${e}) calc(<alpha-value> * 100%), transparent)`;
+}
+var t = [
+	.5,
+	1,
+	1.5,
+	2,
+	2.5,
+	3,
+	3.5,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9,
+	10,
+	11,
+	12,
+	14,
+	16,
+	20,
+	24,
+	28,
+	32,
+	36,
+	40,
+	44,
+	48,
+	52,
+	56,
+	60,
+	64,
+	72,
+	80,
+	96,
+	128
+];
+function n() {
+	let e = {
+		0: "0px",
+		px: "var(--karni-space-px, 1px)"
+	};
+	for (let n of t) {
+		let t = String(n).replace(".", "-");
+		e[String(n)] = `var(--karni-space-${t}, calc(var(--karni-space-unit, 0.25rem) * ${n}))`;
+	}
+	return e;
+}
+var r = {
+	xs: ["0.75rem", "1rem"],
+	sm: ["0.875rem", "1.25rem"],
+	base: ["1rem", "1.5rem"],
+	lg: ["1.125rem", "1.75rem"],
+	xl: ["1.25rem", "1.75rem"],
+	"2xl": ["1.5rem", "2rem"]
+};
+function i() {
+	return Object.fromEntries(Object.entries(r).map(([e, [t, n]]) => [e, [`var(--karni-font-size-${e}, ${t})`, { lineHeight: `var(--karni-font-leading-${e}, ${n})` }]]));
+}
+var a = {
+	darkMode: "class",
+	theme: { extend: {
+		colors: {
+			background: e("background"),
+			foreground: e("foreground"),
+			card: {
+				DEFAULT: e("card"),
+				foreground: e("card-foreground")
+			},
+			popover: {
+				DEFAULT: e("popover"),
+				foreground: e("popover-foreground")
+			},
+			primary: {
+				DEFAULT: e("primary"),
+				foreground: e("primary-foreground"),
+				hover: e("primary-hover")
+			},
+			secondary: {
+				DEFAULT: e("secondary"),
+				foreground: e("secondary-foreground"),
+				hover: e("secondary-hover")
+			},
+			muted: {
+				DEFAULT: e("muted"),
+				foreground: e("muted-foreground"),
+				subtle: e("muted-subtle")
+			},
+			accent: {
+				DEFAULT: e("accent"),
+				foreground: e("accent-foreground")
+			},
+			destructive: {
+				DEFAULT: e("destructive"),
+				foreground: e("destructive-foreground"),
+				hover: e("destructive-hover"),
+				subtle: e("destructive-subtle"),
+				border: e("destructive-border")
+			},
+			border: e("border"),
+			input: e("input"),
+			ring: e("ring"),
+			overlay: e("overlay"),
+			chart: {
+				1: e("chart-1"),
+				2: e("chart-2"),
+				3: e("chart-3"),
+				4: e("chart-4"),
+				5: e("chart-5")
+			}
+		},
+		borderColor: { DEFAULT: e("border") },
+		spacing: n(),
+		borderRadius: {
+			DEFAULT: "var(--karni-radius-sm, 0.25rem)",
+			sm: "var(--karni-radius-sm, 0.25rem)",
+			md: "var(--karni-radius-md, 0.375rem)",
+			lg: "var(--karni-radius-lg, 0.5rem)",
+			xl: "var(--karni-radius-xl, 0.75rem)",
+			full: "var(--karni-radius-full, 9999px)"
+		},
+		fontFamily: {
+			sans: "var(--karni-font-sans, ui-sans-serif, system-ui, sans-serif)",
+			mono: "var(--karni-font-mono, ui-monospace, monospace)"
+		},
+		fontSize: i(),
+		fontWeight: {
+			normal: "var(--karni-font-weight-normal, 400)",
+			medium: "var(--karni-font-weight-medium, 500)",
+			semibold: "var(--karni-font-weight-semibold, 600)",
+			bold: "var(--karni-font-weight-bold, 700)"
+		},
+		lineHeight: { none: "var(--karni-font-leading-none, 1)" },
+		textUnderlineOffset: { 4: "var(--karni-font-underline-offset, 4px)" },
+		letterSpacing: {
+			tight: "var(--karni-font-tracking-tight, -0.025em)",
+			wide: "var(--karni-font-tracking-wide, 0.025em)"
+		},
+		boxShadow: {
+			sm: "var(--karni-shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1))",
+			DEFAULT: "var(--karni-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1))",
+			md: "var(--karni-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1))",
+			lg: "var(--karni-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1))"
+		},
+		borderWidth: {
+			DEFAULT: "var(--karni-border-width, 1px)",
+			2: "var(--karni-border-width-2, 2px)"
+		},
+		divideWidth: { DEFAULT: "var(--karni-border-width, 1px)" },
+		outlineWidth: { DEFAULT: "var(--karni-border-width, 1px)" },
+		ringWidth: {
+			1: "var(--karni-ring-width-1, 1px)",
+			2: "var(--karni-ring-width, 2px)"
+		},
+		ringOffsetWidth: { 2: "var(--karni-ring-offset-width, 2px)" },
+		zIndex: {
+			raised: "var(--karni-z-raised, 10)",
+			drawer: "var(--karni-z-drawer, 40)",
+			popover: "var(--karni-z-popover, 50)",
+			modal: "var(--karni-z-modal, 50)",
+			toast: "var(--karni-z-toast, 100)"
+		},
+		opacity: {
+			50: "var(--karni-opacity-50, 0.5)",
+			60: "var(--karni-opacity-60, 0.6)",
+			70: "var(--karni-opacity-70, 0.7)",
+			90: "var(--karni-opacity-90, 0.9)"
+		},
+		transitionDuration: { DEFAULT: "var(--karni-duration, 150ms)" },
+		transitionTimingFunction: { DEFAULT: "var(--karni-ease, cubic-bezier(0.4, 0, 0.2, 1))" },
+		animation: {
+			pulse: "pulse var(--karni-duration-pulse, 2s) cubic-bezier(0.4, 0, 0.6, 1) infinite",
+			spin: "spin var(--karni-duration-spin, 1s) linear infinite"
+		}
+	} }
+};
+//#endregion
+export { t as SPACE_STEPS, a as default };
+
+//# sourceMappingURL=tailwind-preset.js.map

package/dist/tailwind-preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-preset.js","names":["color","name","SPACE_STEPS","spacing","scale","step","FONT_SIZES","fontSize","size","leading","karniPreset"],"sources":["../tailwind-preset.ts"],"sourcesContent":["/**\n * Tailwind preset for @karni/ui consumers (Tailwind 3, and 4 through @config).\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 loads the same config through `@config` in CSS, next to\n * `@import \"@karni/ui/tailwind-v4.css\"` (see the README).\n */\nimport type { Config } from \"tailwindcss\";\n\n/**\n * A colour token as a Tailwind colour. Wrapping it in color-mix with\n * `<alpha-value>` keeps opacity modifiers (`bg-primary/50`) working in\n * Tailwind 3 as well as 4, for any colour format the token holds.\n */\nfunction color(name: string): string {\n  return `color-mix(in srgb, var(--karni-color-${name}) calc(<alpha-value> * 100%), transparent)`;\n}\n\n/** The spacing scale: each step reads --karni-space-<n>, else n × --karni-space-unit. */\nexport const SPACE_STEPS = [\n  0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48,\n  52, 56, 60, 64, 72, 80, 96, 128,\n] as const;\n\nfunction spacing(): Record<string, string> {\n  const scale: Record<string, string> = {\n    0: \"0px\",\n    px: \"var(--karni-space-px, 1px)\",\n  };\n  for (const step of SPACE_STEPS) {\n    const name = String(step).replace(\".\", \"-\");\n    scale[String(step)] =\n      `var(--karni-space-${name}, calc(var(--karni-space-unit, 0.25rem) * ${step}))`;\n  }\n  return scale;\n}\n\nconst FONT_SIZES = {\n  xs: [\"0.75rem\", \"1rem\"],\n  sm: [\"0.875rem\", \"1.25rem\"],\n  base: [\"1rem\", \"1.5rem\"],\n  lg: [\"1.125rem\", \"1.75rem\"],\n  xl: [\"1.25rem\", \"1.75rem\"],\n  \"2xl\": [\"1.5rem\", \"2rem\"],\n} as const;\n\nfunction fontSize(): Record<string, [string, { lineHeight: string }]> {\n  return Object.fromEntries(\n    Object.entries(FONT_SIZES).map(([name, [size, leading]]) => [\n      name,\n      [\n        `var(--karni-font-size-${name}, ${size})`,\n        { lineHeight: `var(--karni-font-leading-${name}, ${leading})` },\n      ],\n    ]),\n  );\n}\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: color(\"background\"),\n        foreground: color(\"foreground\"),\n        card: { DEFAULT: color(\"card\"), foreground: color(\"card-foreground\") },\n        popover: { DEFAULT: color(\"popover\"), foreground: color(\"popover-foreground\") },\n        primary: {\n          DEFAULT: color(\"primary\"),\n          foreground: color(\"primary-foreground\"),\n          hover: color(\"primary-hover\"),\n        },\n        secondary: {\n          DEFAULT: color(\"secondary\"),\n          foreground: color(\"secondary-foreground\"),\n          hover: color(\"secondary-hover\"),\n        },\n        muted: {\n          DEFAULT: color(\"muted\"),\n          foreground: color(\"muted-foreground\"),\n          subtle: color(\"muted-subtle\"),\n        },\n        accent: { DEFAULT: color(\"accent\"), foreground: color(\"accent-foreground\") },\n        destructive: {\n          DEFAULT: color(\"destructive\"),\n          foreground: color(\"destructive-foreground\"),\n          hover: color(\"destructive-hover\"),\n          subtle: color(\"destructive-subtle\"),\n          border: color(\"destructive-border\"),\n        },\n        border: color(\"border\"),\n        input: color(\"input\"),\n        ring: color(\"ring\"),\n        overlay: color(\"overlay\"),\n        chart: {\n          \"1\": color(\"chart-1\"),\n          \"2\": color(\"chart-2\"),\n          \"3\": color(\"chart-3\"),\n          \"4\": color(\"chart-4\"),\n          \"5\": color(\"chart-5\"),\n        },\n      },\n      borderColor: {\n        // A bare `border` class uses the token, never Tailwind's default gray.\n        DEFAULT: color(\"border\"),\n      },\n      spacing: spacing(),\n      borderRadius: {\n        DEFAULT: \"var(--karni-radius-sm, 0.25rem)\",\n        sm: \"var(--karni-radius-sm, 0.25rem)\",\n        md: \"var(--karni-radius-md, 0.375rem)\",\n        lg: \"var(--karni-radius-lg, 0.5rem)\",\n        xl: \"var(--karni-radius-xl, 0.75rem)\",\n        full: \"var(--karni-radius-full, 9999px)\",\n      },\n      fontFamily: {\n        sans: \"var(--karni-font-sans, ui-sans-serif, system-ui, sans-serif)\",\n        mono: \"var(--karni-font-mono, ui-monospace, monospace)\",\n      },\n      fontSize: fontSize(),\n      fontWeight: {\n        normal: \"var(--karni-font-weight-normal, 400)\",\n        medium: \"var(--karni-font-weight-medium, 500)\",\n        semibold: \"var(--karni-font-weight-semibold, 600)\",\n        bold: \"var(--karni-font-weight-bold, 700)\",\n      },\n      lineHeight: { none: \"var(--karni-font-leading-none, 1)\" },\n      textUnderlineOffset: { \"4\": \"var(--karni-font-underline-offset, 4px)\" },\n      letterSpacing: {\n        tight: \"var(--karni-font-tracking-tight, -0.025em)\",\n        wide: \"var(--karni-font-tracking-wide, 0.025em)\",\n      },\n      boxShadow: {\n        sm: \"var(--karni-shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1))\",\n        DEFAULT: \"var(--karni-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1))\",\n        md: \"var(--karni-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1))\",\n        lg: \"var(--karni-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1))\",\n      },\n      borderWidth: {\n        DEFAULT: \"var(--karni-border-width, 1px)\",\n        \"2\": \"var(--karni-border-width-2, 2px)\",\n      },\n      divideWidth: { DEFAULT: \"var(--karni-border-width, 1px)\" },\n      outlineWidth: { DEFAULT: \"var(--karni-border-width, 1px)\" },\n      ringWidth: {\n        \"1\": \"var(--karni-ring-width-1, 1px)\",\n        \"2\": \"var(--karni-ring-width, 2px)\",\n      },\n      ringOffsetWidth: { \"2\": \"var(--karni-ring-offset-width, 2px)\" },\n      zIndex: {\n        raised: \"var(--karni-z-raised, 10)\",\n        drawer: \"var(--karni-z-drawer, 40)\",\n        popover: \"var(--karni-z-popover, 50)\",\n        modal: \"var(--karni-z-modal, 50)\",\n        toast: \"var(--karni-z-toast, 100)\",\n      },\n      opacity: {\n        \"50\": \"var(--karni-opacity-50, 0.5)\",\n        \"60\": \"var(--karni-opacity-60, 0.6)\",\n        \"70\": \"var(--karni-opacity-70, 0.7)\",\n        \"90\": \"var(--karni-opacity-90, 0.9)\",\n      },\n      transitionDuration: { DEFAULT: \"var(--karni-duration, 150ms)\" },\n      transitionTimingFunction: { DEFAULT: \"var(--karni-ease, cubic-bezier(0.4, 0, 0.2, 1))\" },\n      animation: {\n        pulse: \"pulse var(--karni-duration-pulse, 2s) cubic-bezier(0.4, 0, 0.6, 1) infinite\",\n        spin: \"spin var(--karni-duration-spin, 1s) linear infinite\",\n      },\n    },\n  },\n} satisfies Omit<Config, \"content\">;\n\nexport default karniPreset;\n"],"mappings":"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"}

package/dist/tailwind-v4.css

@@ -0,0 +1,31 @@
+/* @karni/ui under Tailwind 4: import once, after Tailwind itself.
+ *
+ *   @import "tailwindcss";
+ *   @import "@karni/ui/tailwind-v4.css";
+ *   @config "../tailwind.config.ts";   (the @karni/ui preset)
+ *
+ * Tailwind 3 projects do not import this file: Tailwind 3 rejects an
+ * `@layer base` outside its own stylesheet, and needs nothing here.
+ *
+ * A bare `border` uses the --karni-color-border token, as under Tailwind 3, whose
+ * preflight applies the preset's default border color. Tailwind 4 defaults
+ * borders to currentColor. In the base layer this rule sits below every
+ * utility, so `border-input`, `border-destructive` and the rest still win;
+ * `:root` lifts it just above Tailwind's own reset. */
+@layer base {
+  :root *,
+  :root ::before,
+  :root ::after,
+  :root ::backdrop,
+  :root ::file-selector-button {
+    border-color: var(--karni-color-border);
+  }
+}
+
+/* Tailwind 4 reads transition timing from its own theme variables rather
+ * than the preset; point them at the motion tokens (which drop to 0ms under
+ * prefers-reduced-motion). */
+@theme {
+  --default-transition-duration: var(--karni-duration);
+  --default-transition-timing-function: var(--karni-ease);
+}

package/dist/vite-plugin.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./script-BVJ9BbPm.cjs");function t(){return{name:`karni-theme`,transformIndexHtml:()=>[{tag:`script`,children:e.t,injectTo:`head-prepend`}]}}exports.karniTheme=t;
+//# sourceMappingURL=vite-plugin.cjs.map

package/dist/vite-plugin.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-plugin.cjs","names":["KARNI_THEME_SCRIPT","require_script","karniTheme"],"sources":["../vite-plugin.ts"],"sourcesContent":["/**\n * `@karni/ui/vite`: what a Vite app needs from @karni/ui at build time.\n *\n *   import { karniTheme } from \"@karni/ui/vite\";\n *   export default defineConfig({ plugins: [react(), karniTheme()] });\n *\n * Typed structurally, so it needs no `vite` types of its own.\n */\nimport { KARNI_THEME_SCRIPT } from \"./src/theme/script\";\n\n/** One tag Vite's `transformIndexHtml` adds to index.html. */\nexport interface KarniHtmlTag {\n  tag: \"script\";\n  children: string;\n  injectTo: \"head-prepend\";\n}\n\n/** The plugin object `karniTheme()` returns (a Vite `Plugin`). */\nexport interface KarniThemePlugin {\n  name: \"karni-theme\";\n  transformIndexHtml: () => KarniHtmlTag[];\n}\n\n/**\n * Puts KARNI_THEME_SCRIPT first in index.html's <head>, so the page paints\n * in the user's theme (stored, else the system's) before React starts.\n * Pair it with <ThemeProvider> around the app. Escape hatch: leave the\n * plugin out and inline KARNI_THEME_SCRIPT yourself (another storage key,\n * another framework).\n */\nexport function karniTheme(): KarniThemePlugin {\n  return {\n    name: \"karni-theme\",\n    transformIndexHtml: () => [\n      { tag: \"script\", children: KARNI_THEME_SCRIPT, injectTo: \"head-prepend\" },\n    ],\n  };\n}\n"],"mappings":"A,4GA8BA,SAAgBE,GAA+B,CAC7C,MAAO,CACL,KAAM,cACN,uBAA0B,CACxB,CAAE,IAAK,SAAU,SAAUF,EAAAA,EAAoB,SAAU,cAAe,CAC1E,CACF,CACF,C"}

package/dist/vite-plugin.d.ts

@@ -0,0 +1,19 @@
+/** One tag Vite's `transformIndexHtml` adds to index.html. */
+export interface KarniHtmlTag {
+    tag: "script";
+    children: string;
+    injectTo: "head-prepend";
+}
+/** The plugin object `karniTheme()` returns (a Vite `Plugin`). */
+export interface KarniThemePlugin {
+    name: "karni-theme";
+    transformIndexHtml: () => KarniHtmlTag[];
+}
+/**
+ * Puts KARNI_THEME_SCRIPT first in index.html's <head>, so the page paints
+ * in the user's theme (stored, else the system's) before React starts.
+ * Pair it with <ThemeProvider> around the app. Escape hatch: leave the
+ * plugin out and inline KARNI_THEME_SCRIPT yourself (another storage key,
+ * another framework).
+ */
+export declare function karniTheme(): KarniThemePlugin;

package/dist/vite-plugin.js

@@ -0,0 +1,16 @@
+import { t as e } from "./script-D1fn4Dm4.js";
+//#region vite-plugin.ts
+function t() {
+	return {
+		name: "karni-theme",
+		transformIndexHtml: () => [{
+			tag: "script",
+			children: e,
+			injectTo: "head-prepend"
+		}]
+	};
+}
+//#endregion
+export { t as karniTheme };
+
+//# sourceMappingURL=vite-plugin.js.map

package/dist/vite-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-plugin.js","names":["KARNI_THEME_SCRIPT","karniTheme"],"sources":["../vite-plugin.ts"],"sourcesContent":["/**\n * `@karni/ui/vite`: what a Vite app needs from @karni/ui at build time.\n *\n *   import { karniTheme } from \"@karni/ui/vite\";\n *   export default defineConfig({ plugins: [react(), karniTheme()] });\n *\n * Typed structurally, so it needs no `vite` types of its own.\n */\nimport { KARNI_THEME_SCRIPT } from \"./src/theme/script\";\n\n/** One tag Vite's `transformIndexHtml` adds to index.html. */\nexport interface KarniHtmlTag {\n  tag: \"script\";\n  children: string;\n  injectTo: \"head-prepend\";\n}\n\n/** The plugin object `karniTheme()` returns (a Vite `Plugin`). */\nexport interface KarniThemePlugin {\n  name: \"karni-theme\";\n  transformIndexHtml: () => KarniHtmlTag[];\n}\n\n/**\n * Puts KARNI_THEME_SCRIPT first in index.html's <head>, so the page paints\n * in the user's theme (stored, else the system's) before React starts.\n * Pair it with <ThemeProvider> around the app. Escape hatch: leave the\n * plugin out and inline KARNI_THEME_SCRIPT yourself (another storage key,\n * another framework).\n */\nexport function karniTheme(): KarniThemePlugin {\n  return {\n    name: \"karni-theme\",\n    transformIndexHtml: () => [\n      { tag: \"script\", children: KARNI_THEME_SCRIPT, injectTo: \"head-prepend\" },\n    ],\n  };\n}\n"],"mappings":";;AA8BA,SAAgBC,IAA+B;CAC7C,OAAO;EACL,MAAM;EACN,0BAA0B,CACxB;GAAE,KAAK;GAAU,UAAUD;GAAoB,UAAU;EAAe,CAC1E;CACF;AACF"}

package/eslint-plugin/index.js

@@ -0,0 +1,76 @@
+/**
+ * @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";
+import noStyleLiterals from "./rules/no-style-literals.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,
+    // Not in `recommended`: a project with its own design system uses its own
+    // palette. @karni/ui enables it for its own source; projects may opt in.
+    "no-style-literals": noStyleLiterals,
+  },
+  // 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]);
+        }
+      },
+    };
+  },
+};