@marianmeres/stuic 3.143.0 → 3.144.0

package/AGENTS.md

@@ -53,6 +53,9 @@ Theme CSS files are not bundled in this package — they're provided by `@marian
 5. Create components without `unstyled`, `class`, `el` props
 6. Use `dark:` Tailwind prefix when CSS vars handle dark mode
 7. Import CSS inside components — centralize in `src/lib/index.css`
+   (**exception:** subpath-export components with optional peer deps — `MarkdownEditor`,
+   `CommentInput` — import their own `index.css` locally so their styles don't ship to
+   barrel-only consumers. Enforced by `src/lib/barrel-optional-peers.test.ts`.)
 8. Declare component tokens at `:root` that reference shared structural tokens (use fallback pattern instead)
 
 ### CSS Variable Pattern

package/README.md

@@ -27,6 +27,29 @@ npm install @marianmeres/stuic
 </Modal>
 ```
 
+## Subpath exports
+
+Most of the library is on the main entry. A few things live behind subpaths:
+
+| Subpath                               | Contents                                                      |
+| ------------------------------------- | ------------------------------------------------------------- |
+| `@marianmeres/stuic`                  | Components, actions, icons, utils — everything below excepted |
+| `@marianmeres/stuic/utils`            | Utilities only, without pulling in components                 |
+| `@marianmeres/stuic/phone-validation` | Phone validation helpers                                      |
+| `@marianmeres/stuic/markdown-editor`  | `MarkdownEditor` — requires optional peer deps                |
+| `@marianmeres/stuic/comment-input`    | `CommentInput` — requires optional peer deps                  |
+
+The last two are **not** on the main entry by design: they depend on Milkdown and
+CodeMirror, which are declared as _optional_ peer dependencies. Keeping them off the
+barrel means consumers who don't use them never have to install that stack — and,
+more importantly, their builds don't fail for want of it.
+
+```ts
+import { CommentInput } from "@marianmeres/stuic/comment-input";
+```
+
+See each component's README for the peer set to install.
+
 ## Theming System
 
 STUIC uses a 4-layer CSS variable token system:

package/dist/components/CommentInput/CommentInput.svelte

@@ -143,6 +143,7 @@
 	import { Button } from "../Button/index.js";
 	import Thc from "../Thc/Thc.svelte";
 	import { MarkdownEditor } from "../MarkdownEditor/index.js";
+	import "./index.css";
 
 	let {
 		value = $bindable(""),

package/dist/components/CommentInput/CommentInput.svelte.d.ts

@@ -110,6 +110,7 @@ export interface Props extends InputWrapClassProps {
     classFooter?: string;
     style?: string;
 }
+import "./index.css";
 declare const CommentInput: import("svelte").Component<Props, {
     validate: () => ValidationResult | undefined;
     clearValidation: () => void;

package/dist/components/CommentInput/README.md

@@ -12,9 +12,14 @@ lightweight, opinionated wrapper for the common "leave a comment / reply" use
 case: a clean minimal toolbar, an avatar, a submit button, and
 ⌘/Ctrl+Enter-to-send — without you having to wire any of it up.
 
+Because it embeds `MarkdownEditor`, it is shipped as an **optional subpath export**
+(`@marianmeres/stuic/comment-input`), separate from the main barrel — so the heavy
+editor dependencies never reach consumers who don't use it. Importing it from
+`@marianmeres/stuic` will not work.
+
 ```svelte
 <script>
-	import { CommentInput } from "@marianmeres/stuic";
+	import { CommentInput } from "@marianmeres/stuic/comment-input";
 
 	let value = $state("");
 
@@ -49,6 +54,11 @@ This is the same peer set as `MarkdownEditor` — see its README for the
 authoritative list. If they aren't installed, the surface stays empty and a
 console error explains why.
 
+> **CSS is imported locally** by this component, not via the central
+> `src/lib/index.css`. Deliberate deviation from the usual STUIC convention,
+> required so these styles ship only to subpath users. Same as `MarkdownEditor`;
+> see `index.css` for the rationale.
+
 ## Toolbar
 
 `toolbar` accepts `true` (the default), `false` (hidden), or an ordered

package/dist/components/CommentInput/index.css

@@ -1,6 +1,19 @@
 /******************************************************************************
   CommentInput
 
+  NOTE — intentional deviation from the usual STUIC CSS convention.
+  Every other component's `index.css` is `@import`-ed into the central
+  `src/lib/index.css`. This component is NOT: because it embeds `MarkdownEditor`
+  it is an OPTIONAL subpath export (`@marianmeres/stuic/comment-input`) kept off
+  the main barrel, so the heavy Milkdown/CodeMirror peers never reach consumers
+  who don't use it. Centralizing its CSS would ship these styles to every
+  consumer anyway. Instead `CommentInput.svelte` imports THIS file locally; the
+  package's `sideEffects` glob (all css files) keeps the import for real users.
+
+  `MarkdownEditor/index.css` arrives on its own — `MarkdownEditor.svelte`
+  imports it locally too — so do NOT `@import` it here (it would double-inject
+  for anyone using both components).
+
   A GitHub-style comment composer built on top of `MarkdownEditor` (a rich
   WYSIWYG / source surface) with an avatar gutter and a submit/cancel footer.
 

package/dist/index.css

@@ -71,7 +71,9 @@ In practice:
 @import "./components/LoginOrRegisterForm/index.css";
 @import "./components/Checkout/index.css";
 @import "./components/CommandMenu/index.css";
-@import "./components/CommentInput/index.css";
+/* NOTE: CommentInput/index.css is deliberately NOT imported here — same reason as
+   MarkdownEditor's. It is a subpath-export component and imports its own CSS
+   locally (see components/CommentInput/index.css). Do not re-add. */
 @import "./components/ContactUsForm/index.css";
 @import "./components/CronInput/index.css";
 @import "./components/DataTable/index.css";

package/dist/index.d.ts

@@ -38,7 +38,6 @@ export * from "./components/Checkout/index.js";
 export * from "./components/Collapsible/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
-export * from "./components/CommentInput/index.js";
 export * from "./components/ContactUsForm/index.js";
 export * from "./components/CronInput/index.js";
 export * from "./components/DataTable/index.js";

package/dist/index.js

@@ -39,7 +39,11 @@ export * from "./components/Checkout/index.js";
 export * from "./components/Collapsible/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
-export * from "./components/CommentInput/index.js";
+// NOTE: CommentInput is deliberately NOT exported here. It embeds MarkdownEditor,
+// whose optional @milkdown/* + @codemirror/* peers would then be pulled into the
+// root entry graph of every consumer. It ships as the `@marianmeres/stuic/comment-input`
+// subpath export instead, mirroring `@marianmeres/stuic/markdown-editor`.
+// Guarded by src/lib/barrel-optional-peers.test.ts — do not re-add.
 export * from "./components/ContactUsForm/index.js";
 export * from "./components/CronInput/index.js";
 export * from "./components/DataTable/index.js";

package/docs/architecture.md

@@ -80,6 +80,17 @@ src/lib/
 
 **DO NOT** use `import './index.css'` inside component `.svelte` files.
 
+**Exception — subpath-export components.** A component whose peer dependencies are
+declared _optional_ (`MarkdownEditor`, `CommentInput`) is kept off the root barrel and
+shipped behind its own subpath export, so those peers never enter the entry graph of
+consumers who don't use it. Such a component imports its own `index.css` locally and is
+**not** `@import`-ed into `src/lib/index.css` — centralizing it would ship the styles to
+every consumer, defeating the isolation. `sideEffects: ["**/*.css"]` in `package.json`
+keeps the local import alive for real users.
+
+Both halves are enforced by `src/lib/barrel-optional-peers.test.ts` — adding such a
+component to the barrel (or its CSS to the central stylesheet) fails the suite.
+
 ---
 
 ## Data Flow
@@ -151,9 +162,20 @@ Theme CSS files are provided by the `@marianmeres/design-tokens` package (a regu
 ### Package Exports
 
 ```json
-".":            Main entry (components, utils, actions, icons, theme types)
+".":                  Main entry (components, utils, actions, icons, theme types)
+"./utils":            Utilities only
+"./phone-validation": Phone validation helpers
+"./markdown-editor":  MarkdownEditor  — optional peer deps, local CSS
+"./comment-input":    CommentInput    — optional peer deps, local CSS
 ```
 
+The last two are deliberately **off** the main entry: they reach `@milkdown/*` and
+`@codemirror/*`, which are optional peers. A consumer that has not installed those
+peers gets a hard bundler error (rolldown reports every named import from the
+unresolved stub as `MISSING_EXPORT`) if the root barrel can reach them — even though
+the editor backends sit behind `await import()`, because the specifiers are static
+literals that a bundler must still resolve at build time.
+
 ---
 
 ## Security Boundaries

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.143.0",
+	"version": "3.144.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",
@@ -54,6 +54,11 @@
 			"types": "./dist/components/MarkdownEditor/index.d.ts",
 			"svelte": "./dist/components/MarkdownEditor/index.js",
 			"default": "./dist/components/MarkdownEditor/index.js"
+		},
+		"./comment-input": {
+			"types": "./dist/components/CommentInput/index.d.ts",
+			"svelte": "./dist/components/CommentInput/index.js",
+			"default": "./dist/components/CommentInput/index.js"
 		}
 	},
 	"peerDependencies": {
@@ -72,8 +77,6 @@
 		"@milkdown/prose": "^7.0.0",
 		"@milkdown/transformer": "^7.0.0",
 		"@milkdown/utils": "^7.0.0",
-		"dompurify": "^3.0.0",
-		"marked": "^18.0.0",
 		"svelte": "^5.0.0"
 	},
 	"peerDependenciesMeta": {
@@ -121,12 +124,6 @@
 		},
 		"@milkdown/utils": {
 			"optional": true
-		},
-		"dompurify": {
-			"optional": true
-		},
-		"marked": {
-			"optional": true
 		}
 	},
 	"devDependencies": {
@@ -157,11 +154,9 @@
 		"@tailwindcss/vite": "^4.3.1",
 		"@types/node": "^25.9.4",
 		"@vitest/browser-playwright": "^4.1.9",
-		"dompurify": "^3.4.11",
 		"dotenv": "^16.6.1",
 		"eslint": "^9.39.4",
 		"globals": "^16.5.0",
-		"marked": "^18.0.5",
 		"playwright": "^1.61.1",
 		"prettier": "^3.9.0",
 		"prettier-plugin-svelte": "^3.5.2",