@gjermundgaraba/pixel-paper 0.1.1 → 0.2.0

package/dist/markdown-editor/live/theme.js

@@ -0,0 +1,132 @@
+import { EditorView } from "@codemirror/view";
+// src/markdown-editor/live/theme.ts
+const PIXEL_LABEL = {
+	fontFamily: "var(--font-px)",
+	fontWeight: "400",
+	textTransform: "uppercase",
+	letterSpacing: "var(--tracking-label)"
+};
+const CODE = {
+	fontFamily: "var(--font-code)",
+	fontSize: "var(--type-control)"
+};
+/** The live layer's look, in `tokens.css` values alone, so paper and plum both hold. */
+const liveMarkdownTheme = EditorView.baseTheme({
+	"&": {
+		color: "var(--ink)",
+		background: "var(--paper)"
+	},
+	"&.cm-focused": { outline: "none" },
+	".cm-scroller": {
+		fontFamily: "var(--font-body)",
+		fontSize: "var(--type-body)",
+		lineHeight: "1.5",
+		overflow: "auto"
+	},
+	".cm-content": {
+		padding: "2px 0",
+		caretColor: "var(--ink)"
+	},
+	".cm-content ::selection": {
+		background: "var(--ink)",
+		color: "var(--paper)"
+	},
+	".cm-cursor": { borderLeftColor: "var(--ink)" },
+	".cm-line": { padding: "0" },
+	".lmd-h": {
+		fontWeight: "var(--read-weight)",
+		lineHeight: "1.3"
+	},
+	".lmd-h1, .lmd-h2": { fontSize: "var(--read-h2)" },
+	".lmd-h3": { fontSize: "var(--read-h3)" },
+	".lmd-h4": {
+		...PIXEL_LABEL,
+		fontSize: "var(--type-control)"
+	},
+	".lmd-h5": { fontSize: "var(--type-body)" },
+	".lmd-h6": {
+		...PIXEL_LABEL,
+		fontSize: "var(--type-label)",
+		color: "var(--muted)"
+	},
+	".lmd-strong": { fontWeight: "var(--read-weight)" },
+	".lmd-em": { fontStyle: "italic" },
+	".lmd-strike, .lmd-done": {
+		textDecoration: "line-through",
+		color: "var(--muted)"
+	},
+	".lmd-code": {
+		...CODE,
+		background: "var(--head)",
+		padding: "1px 5px"
+	},
+	".lmd-link": {
+		color: "var(--ink)",
+		textDecoration: "underline",
+		textDecorationThickness: "var(--hair)",
+		textUnderlineOffset: "3px"
+	},
+	".lmd-codeblock": {
+		...CODE,
+		background: "var(--head)",
+		padding: "0 var(--space-s) !important"
+	},
+	".lmd-table": CODE,
+	".lmd-quote": {
+		borderLeft: "var(--hair) solid var(--ink)",
+		paddingLeft: "var(--space-m) !important",
+		color: "var(--muted)"
+	},
+	".lmd-labeled-rule": {
+		display: "inline-flex",
+		width: "100%",
+		alignItems: "center",
+		gap: "var(--space-s)",
+		color: "var(--muted)",
+		verticalAlign: "middle"
+	},
+	".lmd-labeled-rule::before, .lmd-labeled-rule::after": {
+		content: "\"\"",
+		flex: "1",
+		minWidth: "var(--space-s)",
+		height: "var(--hair)",
+		background: "var(--rule)"
+	},
+	".lmd-hr": {
+		height: "0.8em",
+		background: "linear-gradient(var(--rule), var(--rule)) center / 100% var(--hair) no-repeat"
+	},
+	".lmd-bullet": {
+		color: "var(--muted)",
+		display: "inline-block",
+		minWidth: "0.7em",
+		fontVariantNumeric: "tabular-nums"
+	},
+	".lmd-check": {
+		margin: "0 var(--space-s) 0 0",
+		verticalAlign: "-2px",
+		cursor: "pointer",
+		accentColor: "var(--ink)"
+	},
+	".lmd-img": {
+		display: "block",
+		maxWidth: "100%",
+		maxHeight: "480px",
+		margin: "var(--space-s) 0"
+	},
+	".lmd-img-note": {
+		color: "var(--muted)",
+		fontStyle: "italic"
+	},
+	".lmd-table-widget": {
+		cursor: "text",
+		padding: "2px 0"
+	},
+	".lmd-table-view": { borderCollapse: "collapse" },
+	".lmd-table-view th, .lmd-table-view td": {
+		border: "var(--hair) solid var(--rule)",
+		padding: "3px var(--space-s)",
+		textAlign: "left"
+	}
+});
+export { liveMarkdownTheme };

package/dist/markdown-editor/markdown-editor.d.ts

@@ -0,0 +1,11 @@
+import { ViewConfig as ViewConfig$1 } from "../textarea-field/textarea-field.js";
+import { Schema } from "effect";
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a Markdown editor with `view`. */
+export type ViewConfig<Message> = Pick<ViewConfig$1<Message>, "id" | "label" | "value" | "onInput" | "help" | "error" | "isRequired" | "rows">;
+/** A labelled Markdown field, edited in place: its marks show only around the caret, and the
+ *  text it hands back is the Markdown string, untouched where nobody typed. Without
+ *  `defineMarkdownEditorElement` it is a plain `TextareaField`, which is also what tests see.
+ *  With it, the element takes the textarea's place and drives `onInput` itself, because a
+ *  textarea cannot carry a CRLF document. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/markdown-editor/markdown-editor.js

@@ -0,0 +1,22 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { view as view$1 } from "../textarea-field/textarea-field.js";
+import { Schema } from "effect";
+import { define } from "foldkit/customElement";
+// src/markdown-editor/markdown-editor.ts
+/** The binding to `<pp-markdown-editor>`. The property is `source`, not `value`, because
+*  Foldkit's props module skips a `value` write when the element's `value` already matches. */
+const spec = define({
+	tag: "pp-markdown-editor",
+	properties: { source: Schema.String },
+	events: { "value-change": Schema.Struct({ value: Schema.String }) }
+});
+/** A labelled Markdown field, edited in place: its marks show only around the caret, and the
+*  text it hands back is the Markdown string, untouched where nobody typed. Without
+*  `defineMarkdownEditorElement` it is a plain `TextareaField`, which is also what tests see.
+*  With it, the element takes the textarea's place and drives `onInput` itself, because a
+*  textarea cannot carry a CRLF document. */
+const view = (config, h) => {
+	const host = spec.withMessage(h);
+	return __foldkitBrandViewResult((host([host.Source(config.value), host.OnValueChange(({ value }) => __foldkitBrandViewResult((config.onInput(value)), "@gjermundgaraba/pixel-paper/markdown-editor/markdown-editor.js#anonymous"))], [view$1(config, h)])), "@gjermundgaraba/pixel-paper/markdown-editor/markdown-editor.js#view");
+};
+export { spec, view };

package/dist/markdown-editor/reconcile.js

@@ -0,0 +1,24 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+// src/markdown-editor/reconcile.ts
+/** CodeMirror's document keeps LF, so a stored CRLF text compares equal to it only after this. */
+const withLfLineEndings = (text) => __foldkitBrandViewResult((text.replaceAll(/\r\n?/gu, "\n")), "@gjermundgaraba/pixel-paper/markdown-editor/reconcile.js#withLfLineEndings");
+/** Remembers a document sent up, so its echo cannot be taken for an outside change. */
+const afterEmission = (pending, doc) => __foldkitBrandViewResult(([...pending, doc]), "@gjermundgaraba/pixel-paper/markdown-editor/reconcile.js#afterEmission");
+/** Sorts a `source` write into an echo of this editor's own typing, which must not rewind a
+*  document that has moved on, or an outside change. A render may skip echoes, so a match
+*  also retires everything older. Text loss here would be silent, with no history behind it. */
+const afterSource = (pending, source, doc) => {
+	const echoIndex = pending.indexOf(source);
+	if (echoIndex !== -1) return __foldkitBrandViewResult(({
+		pending: pending.slice(echoIndex + 1),
+		isExternal: false
+	}), "@gjermundgaraba/pixel-paper/markdown-editor/reconcile.js#afterSource");
+	return __foldkitBrandViewResult((withLfLineEndings(source) === doc ? {
+		pending,
+		isExternal: false
+	} : {
+		pending: [],
+		isExternal: true
+	}), "@gjermundgaraba/pixel-paper/markdown-editor/reconcile.js#afterSource");
+};
+export { afterEmission, afterSource, withLfLineEndings };

package/dist/menu/menu.d.ts

@@ -68,17 +68,17 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     readonly edge: "First" | "Last";
   };
   commands?: Update.Commands<{
-    readonly _tag: "ClickedToggle";
-  } | {
-    readonly _tag: "PressedEscape";
+    readonly _tag: "CompletedFocus";
   } | {
     readonly _tag: "CompletedFocusEdge";
   } | {
-    readonly _tag: "CompletedFocus";
+    readonly _tag: "ClickedToggle";
   } | {
     readonly _tag: "CompletedPlaceSlip";
   } | {
     readonly _tag: "LeftSlip";
+  } | {
+    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "PressedTab";
   } | {
@@ -114,11 +114,11 @@ export declare const BindSlip: Mount.MountDefinitionWithArgs<"BindSlip", {
   isEnd: Schema.Boolean;
   edge: Schema.Literals<readonly ["First", "Last"]>;
 }, {
-  readonly _tag: "PressedEscape";
-} | {
   readonly _tag: "CompletedPlaceSlip";
 } | {
   readonly _tag: "LeftSlip";
+} | {
+  readonly _tag: "PressedEscape";
 } | {
   readonly _tag: "PressedTab";
 }>;
@@ -163,17 +163,17 @@ export declare const view: import("foldkit/submodel").View<{
   readonly isOpen: boolean;
   readonly edge: "First" | "Last";
 }, {
-  readonly _tag: "ClickedToggle";
-} | {
-  readonly _tag: "PressedEscape";
+  readonly _tag: "CompletedFocus";
 } | {
   readonly _tag: "CompletedFocusEdge";
 } | {
-  readonly _tag: "CompletedFocus";
+  readonly _tag: "ClickedToggle";
 } | {
   readonly _tag: "CompletedPlaceSlip";
 } | {
   readonly _tag: "LeftSlip";
+} | {
+  readonly _tag: "PressedEscape";
 } | {
   readonly _tag: "PressedTab";
 } | {

package/dist/rail/rail.d.ts

@@ -119,6 +119,10 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     }>;
   };
   commands?: Update.Commands<{
+    readonly _tag: "ClickedToggle";
+  } | {
+    readonly _tag: "PressedEscape";
+  } | {
     readonly _tag: "CompletedShowRailDrawer";
   } | {
     readonly _tag: "CompletedHideRailDrawer";
@@ -132,15 +136,11 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     readonly _tag: "ClickedClose";
   } | {
     readonly _tag: "ClickedOpen";
-  } | {
-    readonly _tag: "ClickedToggle";
   } | {
     readonly _tag: "ClosedDrawer";
   } | {
     readonly _tag: "MovedSplitter";
     readonly clientX: number;
-  } | {
-    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "PressedSplitter";
     readonly pointerId: number;
@@ -187,6 +187,10 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
       readonly width: number;
     }>;
   }, {
+    readonly _tag: "ClickedToggle";
+  } | {
+    readonly _tag: "PressedEscape";
+  } | {
     readonly _tag: "CompletedShowRailDrawer";
   } | {
     readonly _tag: "CompletedHideRailDrawer";
@@ -200,15 +204,11 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     readonly _tag: "ClickedClose";
   } | {
     readonly _tag: "ClickedOpen";
-  } | {
-    readonly _tag: "ClickedToggle";
   } | {
     readonly _tag: "ClosedDrawer";
   } | {
     readonly _tag: "MovedSplitter";
     readonly clientX: number;
-  } | {
-    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "PressedSplitter";
     readonly pointerId: number;
@@ -237,6 +237,10 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
       readonly width: number;
     }>;
   }, {
+    readonly _tag: "ClickedToggle";
+  } | {
+    readonly _tag: "PressedEscape";
+  } | {
     readonly _tag: "CompletedShowRailDrawer";
   } | {
     readonly _tag: "CompletedHideRailDrawer";
@@ -250,15 +254,11 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     readonly _tag: "ClickedClose";
   } | {
     readonly _tag: "ClickedOpen";
-  } | {
-    readonly _tag: "ClickedToggle";
   } | {
     readonly _tag: "ClosedDrawer";
   } | {
     readonly _tag: "MovedSplitter";
     readonly clientX: number;
-  } | {
-    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "PressedSplitter";
     readonly pointerId: number;
@@ -341,6 +341,10 @@ export declare const view: import("foldkit/submodel").View<{
     readonly width: number;
   }>;
 }, {
+  readonly _tag: "ClickedToggle";
+} | {
+  readonly _tag: "PressedEscape";
+} | {
   readonly _tag: "CompletedShowRailDrawer";
 } | {
   readonly _tag: "CompletedHideRailDrawer";
@@ -354,15 +358,11 @@ export declare const view: import("foldkit/submodel").View<{
   readonly _tag: "ClickedClose";
 } | {
   readonly _tag: "ClickedOpen";
-} | {
-  readonly _tag: "ClickedToggle";
 } | {
   readonly _tag: "ClosedDrawer";
 } | {
   readonly _tag: "MovedSplitter";
   readonly clientX: number;
-} | {
-  readonly _tag: "PressedEscape";
 } | {
   readonly _tag: "PressedSplitter";
   readonly pointerId: number;

package/dist/sortable/sortable.d.ts

@@ -187,8 +187,6 @@ export declare const update: (model: Model, message: Message) => Readonly<{
       readonly orientation: "Horizontal" | "Vertical";
       readonly activationThreshold: number;
       readonly dragState: {
-        readonly _tag: "Idle";
-      } | {
         readonly _tag: "Dragging";
         readonly itemId: string;
         readonly sourceContainerId: string;
@@ -205,6 +203,8 @@ export declare const update: (model: Model, message: Message) => Readonly<{
           readonly containerId: string;
           readonly index: number;
         }>;
+      } | {
+        readonly _tag: "Idle";
       } | {
         readonly _tag: "KeyboardDragging";
         readonly itemId: string;
@@ -344,8 +344,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
       readonly orientation: "Horizontal" | "Vertical";
       readonly activationThreshold: number;
       readonly dragState: {
-        readonly _tag: "Idle";
-      } | {
         readonly _tag: "Dragging";
         readonly itemId: string;
         readonly sourceContainerId: string;
@@ -362,6 +360,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
           readonly containerId: string;
           readonly index: number;
         }>;
+      } | {
+        readonly _tag: "Idle";
       } | {
         readonly _tag: "KeyboardDragging";
         readonly itemId: string;
@@ -494,8 +494,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
       readonly orientation: "Horizontal" | "Vertical";
       readonly activationThreshold: number;
       readonly dragState: {
-        readonly _tag: "Idle";
-      } | {
         readonly _tag: "Dragging";
         readonly itemId: string;
         readonly sourceContainerId: string;
@@ -512,6 +510,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
           readonly containerId: string;
           readonly index: number;
         }>;
+      } | {
+        readonly _tag: "Idle";
       } | {
         readonly _tag: "KeyboardDragging";
         readonly itemId: string;
@@ -640,8 +640,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
       readonly orientation: "Horizontal" | "Vertical";
       readonly activationThreshold: number;
       readonly dragState: {
-        readonly _tag: "Idle";
-      } | {
         readonly _tag: "Dragging";
         readonly itemId: string;
         readonly sourceContainerId: string;
@@ -658,6 +656,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
           readonly containerId: string;
           readonly index: number;
         }>;
+      } | {
+        readonly _tag: "Idle";
       } | {
         readonly _tag: "KeyboardDragging";
         readonly itemId: string;
@@ -786,8 +786,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
       readonly orientation: "Horizontal" | "Vertical";
       readonly activationThreshold: number;
       readonly dragState: {
-        readonly _tag: "Idle";
-      } | {
         readonly _tag: "Dragging";
         readonly itemId: string;
         readonly sourceContainerId: string;
@@ -804,6 +802,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
           readonly containerId: string;
           readonly index: number;
         }>;
+      } | {
+        readonly _tag: "Idle";
       } | {
         readonly _tag: "KeyboardDragging";
         readonly itemId: string;
@@ -974,8 +974,6 @@ export declare const view: import("foldkit/submodel").View<{
     readonly orientation: "Horizontal" | "Vertical";
     readonly activationThreshold: number;
     readonly dragState: {
-      readonly _tag: "Idle";
-    } | {
       readonly _tag: "Dragging";
       readonly itemId: string;
       readonly sourceContainerId: string;
@@ -992,6 +990,8 @@ export declare const view: import("foldkit/submodel").View<{
         readonly containerId: string;
         readonly index: number;
       }>;
+    } | {
+      readonly _tag: "Idle";
     } | {
       readonly _tag: "KeyboardDragging";
       readonly itemId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjermundgaraba/pixel-paper",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Printed-paper Foldkit components, tokens and stylesheet.",
   "license": "MIT",
   "repository": {
@@ -12,7 +12,8 @@
     "dist",
     "fonts",
     "src/pixel-paper.css",
-    "src/tokens.css"
+    "src/tokens.css",
+    "THIRD_PARTY_NOTICES.md"
   ],
   "type": "module",
   "sideEffects": [
@@ -27,16 +28,29 @@
       "types": "./dist/scheme/script.d.ts",
       "default": "./dist/scheme/script.js"
     },
+    "./markdown-editor/element": {
+      "types": "./dist/markdown-editor/element.d.ts",
+      "default": "./dist/markdown-editor/element.js"
+    },
     "./pixel-paper.css": "./src/pixel-paper.css"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
+    "@codemirror/commands": "6.11.1",
+    "@codemirror/lang-markdown": "6.5.2",
+    "@codemirror/language": "6.13.1",
+    "@codemirror/merge": "6.12.3",
+    "@codemirror/state": "6.7.6",
+    "@codemirror/view": "6.43.15",
+    "@lezer/common": "1.5.4",
+    "@lezer/markdown": "1.8.1",
     "diff": "^9.0.0"
   },
   "devDependencies": {
     "@effect/platform-browser": "4.0.6",
+    "@effect/vitest": "4.0.6",
     "@foldkit/ui": "0.169.0",
     "@foldkit/vite-plugin": "0.28.0",
     "@types/node": "26.6.5",

package/src/pixel-paper.css

@@ -1673,6 +1673,52 @@ button.choice {
   font: var(--type-body)/1.5 var(--font-body);
 }
 
+pp-markdown-editor {
+  display: block;
+  position: relative;
+}
+
+pp-markdown-editor:defined textarea {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+  overflow: hidden;
+  clip-path: inset(50%);
+  resize: none;
+}
+
+.markdown-surface {
+  border-bottom: 1px dotted var(--muted);
+  padding-bottom: 1px;
+}
+
+.markdown-surface .cm-scroller {
+  min-height: max(96px, calc(var(--rows) * 1lh));
+}
+
+.markdown-surface:focus-within,
+.field:has([aria-invalid="true"]) .markdown-surface {
+  border-bottom: var(--line) solid var(--ink);
+  padding-bottom: 0;
+}
+
+.field:has([aria-invalid="true"]) .markdown-surface {
+  border-bottom-color: var(--red);
+}
+
+pp-markdown-editor:disabled .markdown-surface {
+  border-bottom-color: transparent;
+}
+
+pp-markdown-editor:disabled .cm-content {
+  color: var(--muted);
+}
+
 textarea::-webkit-resizer {
   background: linear-gradient(135deg, transparent 0 50%, var(--ink) 50% 100%);
 }