@gjermundgaraba/pixel-paper 0.1.0 → 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: "CompletedFocus";
+  } | {
     readonly _tag: "CompletedFocusEdge";
   } | {
     readonly _tag: "ClickedToggle";
-  } | {
-    readonly _tag: "PressedEscape";
-  } | {
-    readonly _tag: "CompletedFocus";
   } | {
     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: "CompletedFocus";
+} | {
   readonly _tag: "CompletedFocusEdge";
 } | {
   readonly _tag: "ClickedToggle";
-} | {
-  readonly _tag: "PressedEscape";
-} | {
-  readonly _tag: "CompletedFocus";
 } | {
   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/reel/reel.d.ts

@@ -291,12 +291,10 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     readonly _tag: "CompletedFocusTab";
   } | {
     readonly _tag: "CompletedRestoreFocus";
-  } | {
-    readonly _tag: "CancelledPointer";
-  } | {
-    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "CompletedScrollIntoView";
+  } | {
+    readonly _tag: "CancelledPointer";
   } | {
     readonly _tag: "CancelledSplitter";
   } | {
@@ -323,6 +321,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
   } | {
     readonly _tag: "MovedSplitter";
     readonly share: number;
+  } | {
+    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "PressedGrip";
     readonly paneId: string;
@@ -447,12 +447,10 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     readonly _tag: "CompletedFocusTab";
   } | {
     readonly _tag: "CompletedRestoreFocus";
-  } | {
-    readonly _tag: "CancelledPointer";
-  } | {
-    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "CompletedScrollIntoView";
+  } | {
+    readonly _tag: "CancelledPointer";
   } | {
     readonly _tag: "CancelledSplitter";
   } | {
@@ -479,6 +477,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
   } | {
     readonly _tag: "MovedSplitter";
     readonly share: number;
+  } | {
+    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "PressedGrip";
     readonly paneId: string;
@@ -603,12 +603,10 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     readonly _tag: "CompletedFocusTab";
   } | {
     readonly _tag: "CompletedRestoreFocus";
-  } | {
-    readonly _tag: "CancelledPointer";
-  } | {
-    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "CompletedScrollIntoView";
+  } | {
+    readonly _tag: "CancelledPointer";
   } | {
     readonly _tag: "CancelledSplitter";
   } | {
@@ -635,6 +633,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
   } | {
     readonly _tag: "MovedSplitter";
     readonly share: number;
+  } | {
+    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "PressedGrip";
     readonly paneId: string;
@@ -767,12 +767,10 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     readonly _tag: "CompletedFocusTab";
   } | {
     readonly _tag: "CompletedRestoreFocus";
-  } | {
-    readonly _tag: "CancelledPointer";
-  } | {
-    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "CompletedScrollIntoView";
+  } | {
+    readonly _tag: "CancelledPointer";
   } | {
     readonly _tag: "CancelledSplitter";
   } | {
@@ -799,6 +797,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
   } | {
     readonly _tag: "MovedSplitter";
     readonly share: number;
+  } | {
+    readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "PressedGrip";
     readonly paneId: string;
@@ -965,12 +965,10 @@ export declare const view: import("foldkit/submodel").View<{
   readonly _tag: "CompletedFocusTab";
 } | {
   readonly _tag: "CompletedRestoreFocus";
-} | {
-  readonly _tag: "CancelledPointer";
-} | {
-  readonly _tag: "PressedEscape";
 } | {
   readonly _tag: "CompletedScrollIntoView";
+} | {
+  readonly _tag: "CancelledPointer";
 } | {
   readonly _tag: "CancelledSplitter";
 } | {
@@ -997,6 +995,8 @@ export declare const view: import("foldkit/submodel").View<{
 } | {
   readonly _tag: "MovedSplitter";
   readonly share: number;
+} | {
+  readonly _tag: "PressedEscape";
 } | {
   readonly _tag: "PressedGrip";
   readonly paneId: string;