@mkbabb/glass-ui 3.10.1 → 3.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{CardAction-DrAcAV4d.js → CardAction-DuArVky-.js} +2 -2
- package/dist/{CommandShortcut-mV2e1aG6.js → CommandShortcut-CefCj5mt.js} +2 -2
- package/dist/{DataTable-C3E6jZ5B.js → DataTable-CUHMukiQ.js} +2 -2
- package/dist/DeckProgress-Dmk4_AKN.js +23 -0
- package/dist/{DialogContent-BxaaafFi.js → DialogContent-BRkT1cjP.js} +1 -1
- package/dist/{HoverPopover-CDA_SaCe.js → HoverPopover-2LOIW34a.js} +1 -1
- package/dist/InstrumentRail-CUJ05YVG.js +44 -0
- package/dist/{MetricBadge-idgrkqoP.js → MetricBadge-BZVWIxNy.js} +7 -5
- package/dist/{Notification-Cu0nN17_.js → Notification-DLMhblXR.js} +1 -1
- package/dist/{NumberFieldContent-CHEWghnY.js → NumberFieldContent-BbLOh8RU.js} +2 -2
- package/dist/{PopoverContent-DpUvdYY-.js → PopoverContent-BId6ggf_.js} +1 -1
- package/dist/{Progress-BW-StFw2.js → Progress-iEuD9pxG.js} +1 -1
- package/dist/{ScrollingText-DruYCni_.js → ScrollingText-BPP84wKo.js} +1 -1
- package/dist/{SelectScrollDownButton-pirzjm--.js → SelectScrollDownButton-T32cVFeM.js} +3 -3
- package/dist/{Switch-DeAqg6pi.js → Switch-Ch-k3Rv-.js} +1 -1
- package/dist/{TabsList-BAVzOZpg.js → TabsList-B8CVOQPC.js} +2 -2
- package/dist/{Toaster-CvuuW_y9.js → Toaster-1rYWrmAm.js} +46 -49
- package/dist/{ToggleGroupItem-DtD37b4G.js → ToggleGroupItem-COu_4IW4.js} +21 -17
- package/dist/animated-digit.js +2 -2
- package/dist/api/index.d.ts +5 -4
- package/dist/api.js +2 -2
- package/dist/aurora.js +70 -70
- package/dist/{badge-NdCQMvvB.js → badge-CaoFJzRb.js} +1 -1
- package/dist/badge.js +1 -1
- package/dist/{button-DyiWFAOE.js → button-DN39cGqL.js} +12 -12
- package/dist/button.js +1 -1
- package/dist/canvas.js +2 -2
- package/dist/card.js +1 -1
- package/dist/carousel.js +5 -5
- package/dist/collapsible.js +1 -1
- package/dist/{color-B65wWyQz.js → color-C5ls_QF7.js} +7 -9
- package/dist/color.js +1 -1
- package/dist/command.js +1 -1
- package/dist/components/custom/aurora/constants/presets.d.ts +62 -5
- package/dist/components/custom/aurora/constants/shaders/mediums.glsl.d.ts +1 -1
- package/dist/components/custom/aurora/index.d.ts +1 -1
- package/dist/components/custom/constellation/Constellation.vue.d.ts +0 -12
- package/dist/components/custom/constellation/constellationField.d.ts +151 -10
- package/dist/components/custom/constellation/index.d.ts +1 -3
- package/dist/components/custom/controls/DarkModeToggle.vue.d.ts +0 -11
- package/dist/components/custom/deck-progress/DeckProgress.vue.d.ts +27 -0
- package/dist/components/custom/deck-progress/index.d.ts +2 -0
- package/dist/components/custom/dialog-native/GlassDialogNative.vue.d.ts +57 -0
- package/dist/components/custom/dialog-native/index.d.ts +1 -0
- package/dist/components/custom/dock/DockTabButton.vue.d.ts +4 -3
- package/dist/components/custom/dock/GlassDock.vue.d.ts +115 -3
- package/dist/components/custom/dock/composables/dockMorphContext.d.ts +0 -36
- package/dist/components/custom/dock/composables/useLayerTransition.d.ts +0 -44
- package/dist/components/custom/expandable-container/ExpandableContainer.vue.d.ts +37 -5
- package/dist/components/custom/fourier-field/index.d.ts +1 -1
- package/dist/components/custom/fourier-field/math.d.ts +0 -17
- package/dist/components/custom/glass-panel/GlassPanel.vue.d.ts +41 -0
- package/dist/components/custom/glass-panel/index.d.ts +2 -0
- package/dist/components/custom/goo-blob/composables/useBlobPointer.d.ts +3 -4
- package/dist/components/custom/goo-blob/composables/useMetaballRenderer.d.ts +8 -11
- package/dist/components/custom/handmark/HandMark.vue.d.ts +29 -0
- package/dist/components/custom/handmark/brush.d.ts +242 -0
- package/dist/components/custom/handmark/freehand.d.ts +69 -0
- package/dist/components/custom/handmark/geometry.d.ts +50 -0
- package/dist/components/custom/handmark/index.d.ts +21 -0
- package/dist/components/custom/handmark/ink.d.ts +11 -0
- package/dist/components/custom/handmark/texture.d.ts +39 -0
- package/dist/components/custom/handmark/types.d.ts +53 -0
- package/dist/components/custom/handmark/useHandMark.d.ts +87 -0
- package/dist/components/custom/header-ribbon/HeaderRibbon.vue.d.ts +31 -0
- package/dist/components/custom/header-ribbon/index.d.ts +2 -0
- package/dist/components/custom/header-ribbon/types.d.ts +7 -0
- package/dist/components/custom/instrument-chassis/InstrumentChassis.vue.d.ts +2 -2
- package/dist/components/custom/instrument-rail/InstrumentRail.vue.d.ts +91 -0
- package/dist/components/custom/instrument-rail/index.d.ts +2 -0
- package/dist/components/custom/metric-badge/MetricBadge.vue.d.ts +8 -0
- package/dist/components/ui/drawer/Drawer.vue.d.ts +0 -1
- package/dist/components/ui/dropdown-menu/DropdownMenuSubContent.vue.d.ts +2 -2
- package/dist/components/ui/slider/index.d.ts +19 -22
- package/dist/components/ui/toast/use-toast.d.ts +2 -2
- package/dist/components/ui/toggle/Toggle.vue.d.ts +1 -1
- package/dist/components/ui/toggle/index.d.ts +1 -1
- package/dist/components/ui/toggle-group/ToggleGroup.vue.d.ts +7 -1
- package/dist/components/ui/toggle-group/ToggleGroupItem.vue.d.ts +3 -1
- package/dist/components/ui/toggle-group/toggleGroupContext.d.ts +13 -0
- package/dist/composables/color/index.d.ts +0 -12
- package/dist/composables/dark/index.d.ts +1 -1
- package/dist/composables/dark/useGlobalDark.d.ts +21 -1
- package/dist/composables/glass/useSpecularTracking.d.ts +3 -12
- package/dist/composables/motion/core/index.d.ts +1 -0
- package/dist/composables/motion/index.d.ts +0 -2
- package/dist/composables/motion/useRouteTransition.d.ts +42 -0
- package/dist/composables/motion/useSpringMount.d.ts +1 -1
- package/dist/configurator.js +1 -1
- package/dist/confirm-dialog.js +2 -2
- package/dist/constellation.js +225 -260
- package/dist/controls.js +14 -48
- package/dist/dark.d.ts +1 -1
- package/dist/dark.js +1 -1
- package/dist/data-table.js +1 -1
- package/dist/deck-progress.d.ts +1 -0
- package/dist/deck-progress.js +2 -0
- package/dist/dialog.js +2 -2
- package/dist/dock.js +345 -340
- package/dist/dockContext-BKeIMmNk.js +9 -0
- package/dist/{dropdown-menu-DVnQcA0E.js → dropdown-menu-D77jX6Df.js} +4 -7
- package/dist/dropdown-menu.js +1 -1
- package/dist/expandable-container.js +79 -38
- package/dist/forms.js +2 -2
- package/dist/fourier-field.js +102 -137
- package/dist/fourier-math.js +2 -2
- package/dist/glass-panel.d.ts +1 -0
- package/dist/glass-panel.js +44 -0
- package/dist/glass-ui.css +1 -1
- package/dist/glass-ui.js +209 -287
- package/dist/goo-blob.js +212 -243
- package/dist/handmark.d.ts +1 -0
- package/dist/handmark.js +662 -0
- package/dist/header-ribbon.d.ts +1 -0
- package/dist/header-ribbon.js +63 -0
- package/dist/hover-popover.js +1 -1
- package/dist/icon-tooltip.js +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/instrument-rail.d.ts +1 -0
- package/dist/instrument-rail.js +2 -0
- package/dist/keyboard.js +1 -1
- package/dist/labeled-field.js +5 -5
- package/dist/{math-BUU9hHID.js → math-DTpRVC0e.js} +2 -18
- package/dist/metric-badge.js +1 -1
- package/dist/metric-stack.js +1 -1
- package/dist/motion-core.js +70 -69
- package/dist/motion.js +37 -38
- package/dist/notification.js +1 -1
- package/dist/number-field.js +1 -1
- package/dist/popover.js +1 -1
- package/dist/{presets-1OhFpaIC.js → presets-BP_ALM0m.js} +14 -1
- package/dist/progress.js +1 -1
- package/dist/pulse.js +1 -1
- package/dist/reactive.js +1 -1
- package/dist/scrolling-text.js +1 -1
- package/dist/search.js +6 -6
- package/dist/select.js +1 -1
- package/dist/{sheet-ChSXcJpU.js → sheet-VZEtNFvO.js} +1 -1
- package/dist/sheet.js +1 -1
- package/dist/{slider-sfl8gFDD.js → slider-ClgpP7EB.js} +4 -4
- package/dist/slider.js +1 -1
- package/dist/sortable-list.js +2 -2
- package/dist/stacked-icons.js +6 -6
- package/dist/styles/animations.css +111 -15
- package/dist/styles/components.css +1 -1
- package/dist/styles/dock/layer-group.css +0 -22
- package/dist/styles/dock/layers.css +1 -11
- package/dist/styles/dock/morph.css +19 -95
- package/dist/styles/dock/shell.css +0 -12
- package/dist/styles/dock-controls.css +31 -28
- package/dist/styles/drawer.css +0 -2
- package/dist/styles/floating-panel.css +0 -2
- package/dist/styles/glass-refract.css +0 -2
- package/dist/styles/glass.css +1188 -31
- package/dist/styles/hover-popover.css +0 -2
- package/dist/styles/index.css +6 -24
- package/dist/styles/instrument-chassis.css +0 -4
- package/dist/styles/paper.css +68 -2
- package/dist/styles/theme.css +20 -13
- package/dist/styles/tokens.css +2360 -22
- package/dist/styles/typography.css +6 -18
- package/dist/styles/utilities.css +1291 -19
- package/dist/styles/view-transition.css +51 -0
- package/dist/switch.js +1 -1
- package/dist/tabs.js +98 -98
- package/dist/timeline.js +2 -2
- package/dist/toast.js +1 -1
- package/dist/toggle-group.js +1 -1
- package/dist/typewriter.js +1 -1
- package/dist/{useAnimatedNumber-DfVgP4te.js → useAnimatedNumber-Bcpy5Etf.js} +1 -1
- package/dist/{useConfiguratorState-BdQXh9ie.js → useConfiguratorState-DxAqksK6.js} +1 -1
- package/dist/useGlassRenderer-D7YGOYiM.js +69 -0
- package/dist/{useGlobalDark-D7R9OypB.js → useGlobalDark-D1wgEqfW.js} +21 -2
- package/dist/useSpecularTracking-BVRZsRHA.js +26 -0
- package/dist/useSpringMount-BJSHcLl3.js +113 -0
- package/dist/useViewTransition-DaN5Zrox.js +21 -0
- package/dist/vReveal-zUIQk-rJ.js +53 -0
- package/dist/watercolor-dot.js +2 -2
- package/package.json +57 -33
- package/src/styles/animations.css +111 -15
- package/src/styles/dock/layer-group.css +0 -22
- package/src/styles/dock/layers.css +1 -11
- package/src/styles/dock/morph.css +19 -95
- package/src/styles/dock/shell.css +0 -12
- package/src/styles/dock-controls.css +31 -28
- package/src/styles/glass.css +1188 -31
- package/src/styles/index.css +6 -24
- package/src/styles/paper.css +68 -2
- package/src/styles/theme.css +20 -13
- package/src/styles/tokens.css +2360 -22
- package/src/styles/typography.css +6 -18
- package/src/styles/utilities.css +1291 -19
- package/src/styles/view-transition.css +51 -0
- package/dist/components/custom/aurora/constants/shaders/vangogh-medium.glsl.d.ts +0 -1
- package/dist/components/custom/constellation/composables/createConstellationField.d.ts +0 -35
- package/dist/components/custom/constellation/composables/useConstellationPointer.d.ts +0 -35
- package/dist/components/custom/constellation/constants.d.ts +0 -36
- package/dist/components/custom/constellation/constellationDraw.d.ts +0 -18
- package/dist/components/custom/constellation/constellationInteraction.d.ts +0 -102
- package/dist/components/custom/dock/composables/useDockMorphWindow.d.ts +0 -15
- package/dist/components/custom/dock/composables/useDockShellProps.d.ts +0 -131
- package/dist/components/custom/dock/constants.d.ts +0 -23
- package/dist/components/custom/fourier-field/presets.d.ts +0 -54
- package/dist/components/custom/goo-blob/composables/buildMetaballProgram.d.ts +0 -18
- package/dist/components/custom/goo-blob/composables/uploadBlobUniforms.d.ts +0 -41
- package/dist/components/custom/goo-blob/constants.d.ts +0 -52
- package/dist/components/custom/goo-blob/shaders/metaball-uniforms.glsl.d.ts +0 -1
- package/dist/components/custom/tabs/constants.d.ts +0 -12
- package/dist/components/custom/underline/GlassUnderline.vue.d.ts +0 -84
- package/dist/components/custom/underline/index.d.ts +0 -2
- package/dist/components/custom/underline/types.d.ts +0 -56
- package/dist/composables/motion/curves.d.ts +0 -48
- package/dist/composables/motion/springPresets.d.ts +0 -33
- package/dist/composables/motion/suite.d.ts +0 -2
- package/dist/dockContext-bho8B1A4.js +0 -17
- package/dist/motion-curves.d.ts +0 -1
- package/dist/motion-curves.js +0 -130
- package/dist/springPresets-aRSm-4_k.js +0 -40
- package/dist/styles/glass/a11y-fallback.css +0 -245
- package/dist/styles/glass/ladder.css +0 -304
- package/dist/styles/glass/material.css +0 -238
- package/dist/styles/glass/progress-rail.css +0 -78
- package/dist/styles/glass/squircle.css +0 -66
- package/dist/styles/glass/surfaces.css +0 -306
- package/dist/styles/tokens/color-radius.css +0 -250
- package/dist/styles/tokens/dark-arm.css +0 -194
- package/dist/styles/tokens/glass.css +0 -413
- package/dist/styles/tokens/light-dark.css +0 -158
- package/dist/styles/tokens/offsets-sizing.css +0 -406
- package/dist/styles/tokens/property-regs.css +0 -169
- package/dist/styles/tokens/scale-paper.css +0 -361
- package/dist/styles/tokens/scheme-motion.css +0 -334
- package/dist/styles/tokens/shadow.css +0 -132
- package/dist/styles/utilities/a11y-overrides.css +0 -140
- package/dist/styles/utilities/animate.css +0 -26
- package/dist/styles/utilities/base.css +0 -365
- package/dist/styles/utilities/btn.css +0 -399
- package/dist/styles/utilities/components.css +0 -317
- package/dist/underline.d.ts +0 -1
- package/dist/underline.js +0 -85
- package/dist/useSpecularTracking-DFK_fhpG.js +0 -32
- package/dist/useSpringMount-DXUzxBjV.js +0 -108
- package/dist/vReveal-CqaCz_mC.js +0 -44
- package/src/styles/glass/a11y-fallback.css +0 -245
- package/src/styles/glass/ladder.css +0 -304
- package/src/styles/glass/material.css +0 -238
- package/src/styles/glass/progress-rail.css +0 -78
- package/src/styles/glass/squircle.css +0 -66
- package/src/styles/glass/surfaces.css +0 -306
- package/src/styles/tokens/color-radius.css +0 -250
- package/src/styles/tokens/dark-arm.css +0 -194
- package/src/styles/tokens/glass.css +0 -413
- package/src/styles/tokens/light-dark.css +0 -158
- package/src/styles/tokens/offsets-sizing.css +0 -406
- package/src/styles/tokens/property-regs.css +0 -169
- package/src/styles/tokens/scale-paper.css +0 -361
- package/src/styles/tokens/scheme-motion.css +0 -334
- package/src/styles/tokens/shadow.css +0 -132
- package/src/styles/utilities/a11y-overrides.css +0 -140
- package/src/styles/utilities/animate.css +0 -26
- package/src/styles/utilities/base.css +0 -365
- package/src/styles/utilities/btn.css +0 -399
- package/src/styles/utilities/components.css +0 -317
- /package/dist/{CollapsibleContent-Drow5WkV.js → CollapsibleContent-CP9qF1v4.js} +0 -0
- /package/dist/{DialogFooter-DufLHi0y.js → DialogFooter-Gprw8H_A.js} +0 -0
- /package/dist/{IconTooltip-BrQ5p181.js → IconTooltip-Cus0fvK0.js} +0 -0
- /package/dist/{Input-B-F818RU.js → Input-xuDwALQR.js} +0 -0
- /package/dist/{_plugin-vue_export-helper-DWghtRt7.js → _plugin-vue_export-helper-ok8pgSl5.js} +0 -0
- /package/dist/{compile-Ce_V55zi.js → compile-BOXjLUxu.js} +0 -0
- /package/dist/{constants-C8NMonuo.js → constants-yKeKnE84.js} +0 -0
- /package/dist/{prng-CjVgzjQT.js → prng-D27-B3tK.js} +0 -0
- /package/dist/{resolveCanvasColor-CRvVzOvP.js → resolveCanvasColor-BBiYfp8g.js} +0 -0
- /package/dist/{useCanvas2D-CSeH8h16.js → useCanvas2D-ClrQuZtp.js} +0 -0
- /package/dist/{useIntersectionPause-DAdVPVp4.js → useIntersectionPause-Cck5Uxk8.js} +0 -0
- /package/dist/{useInterval-D3USn0yc.js → useInterval-Dsmqwi03.js} +0 -0
- /package/dist/{useKeyboardShortcuts-i8tHd5WO.js → useKeyboardShortcuts-CyIYrndH.js} +0 -0
- /package/dist/{useScrollProgress-CcgmgMQt.js → useScrollProgress-CffFGLa5.js} +0 -0
- /package/dist/{useSortable-DnyGXKKY.js → useSortable-C8ReQ50P.js} +0 -0
- /package/dist/{useTextHighlight-B3b10W6r.js → useTextHighlight-CWEi25hf.js} +0 -0
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* brush.ts — the flat Brush DATA model (the keystone; SPEC §2). Pure data, 0 deps.
|
|
3
|
+
* ─────────────────────────────────────────────────────────────────────────────
|
|
4
|
+
* A `Brush` is a plain JSON-serialisable record — twelve scalars, four enums, and
|
|
5
|
+
* one optional `stamp` function. Every built-in medium is a frozen literal: a
|
|
6
|
+
* POINT in one continuous parameter space, NOT a class in a taxonomy. The renderer
|
|
7
|
+
* (`ink.ts`) reads fields — it NEVER branches on instrument name (SPEC §12 acc-1).
|
|
8
|
+
* Adding a medium = adding one row here; an in-between medium = a spread/lerp.
|
|
9
|
+
*
|
|
10
|
+
* Field-count discipline (SPEC §2): resist a 13th scalar per new instrument —
|
|
11
|
+
* `blend` earned its place only because highlighter genuinely needed `multiply`.
|
|
12
|
+
*
|
|
13
|
+
* The shipped register: PEN is the default (clean ink, grain:0 ⇒ no filter); the
|
|
14
|
+
* CRAYON ships as the proven STROKE-crayon (constant-width offset passes + the
|
|
15
|
+
* seeded static feTurbulence grain — `ds-crayon-handmark` verdict), i.e.
|
|
16
|
+
* `ribbon:'stroke'` (the `ribbon:'hull'` perfect-freehand width-variance upgrade
|
|
17
|
+
* is wired but unconsumed — a later field-delta, never a code branch).
|
|
18
|
+
*/
|
|
19
|
+
export type BlendMode = "source-over" | "multiply" | "darken" | "screen";
|
|
20
|
+
export interface TaperSpec {
|
|
21
|
+
/** px the width ramps 0→full at the start (lift-on). */
|
|
22
|
+
start: number;
|
|
23
|
+
/** px the width ramps full→0 at the end (lift-off / dry run-out). */
|
|
24
|
+
end: number;
|
|
25
|
+
/** out-cubic = the lazy pencil run-out. */
|
|
26
|
+
ease: "linear" | "out-cubic";
|
|
27
|
+
}
|
|
28
|
+
export interface Brush {
|
|
29
|
+
/** base stroke diameter, in viewBox units. */
|
|
30
|
+
weight: number;
|
|
31
|
+
/** 0..1.4 seeded ±width variance along arc-length. */
|
|
32
|
+
weightJitter: number;
|
|
33
|
+
/** -1..1 pressure→width gain (pf `thinning`). */
|
|
34
|
+
thinning: number;
|
|
35
|
+
/** lift-on / lift-off ramp. */
|
|
36
|
+
taper: TaperSpec;
|
|
37
|
+
/** L2 body strategy: plain stroked <path> | pf filled hull. DEFAULT 'stroke'. */
|
|
38
|
+
ribbon: "stroke" | "hull";
|
|
39
|
+
/** 0..1 base alpha. */
|
|
40
|
+
opacity: number;
|
|
41
|
+
/** 'source-over' ink | 'multiply' highlighter-behind-text. */
|
|
42
|
+
blend: BlendMode;
|
|
43
|
+
/** overdraw count (pen 1 · crayon 2-3). */
|
|
44
|
+
passes: number;
|
|
45
|
+
/** 0..1 per-pass alpha falloff (heavy core, light fringe). */
|
|
46
|
+
passOpacity: number;
|
|
47
|
+
/** 0..1 paper-through depth — THE master pen↔crayon knob. 0 ⇒ NO filter. */
|
|
48
|
+
grain: number;
|
|
49
|
+
/** feTurbulence baseFrequency (high=pencil tooth · low=crayon wax). */
|
|
50
|
+
grainFreq: number;
|
|
51
|
+
/** feDisplacementMap edge-fray scale, px. */
|
|
52
|
+
grainScale: number;
|
|
53
|
+
/** feTurbulence numOctaves (grain richness). */
|
|
54
|
+
octaves: number;
|
|
55
|
+
/** macro tremor → wobbleLinePoints({ roughness }). */
|
|
56
|
+
roughness: number;
|
|
57
|
+
/** micro displacement scale (boil amplitude + warp filter). */
|
|
58
|
+
wobble: number;
|
|
59
|
+
/** wobble centerline resolution. */
|
|
60
|
+
segments: number;
|
|
61
|
+
cap: "round" | "square" | "butt";
|
|
62
|
+
/** when present, OVERRIDES the built-in ink stage only. */
|
|
63
|
+
stamp?: StampFn;
|
|
64
|
+
}
|
|
65
|
+
/** SPEC §5 — the arbitrary-brush escape hatch (one optional field, not a framework). */
|
|
66
|
+
export type StampFn = (ctx: {
|
|
67
|
+
centerline: [number, number][];
|
|
68
|
+
brush: Brush;
|
|
69
|
+
rng: () => number;
|
|
70
|
+
seed: number;
|
|
71
|
+
length: number;
|
|
72
|
+
color: string;
|
|
73
|
+
}) => {
|
|
74
|
+
paths: InkPath[];
|
|
75
|
+
filterId?: string | null;
|
|
76
|
+
defs?: string[];
|
|
77
|
+
};
|
|
78
|
+
/** One ink path the renderer emits (shared with ink.ts; declared here to avoid a cycle). */
|
|
79
|
+
export interface InkPath {
|
|
80
|
+
d: string;
|
|
81
|
+
fill?: string;
|
|
82
|
+
stroke?: string;
|
|
83
|
+
opacity: number;
|
|
84
|
+
blend: BlendMode;
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* The named points in the continuum. `pen` is the DEFAULT (clean ink, grain:0).
|
|
88
|
+
* `crayon` is the SHIPPED stroke-crayon (ribbon:'stroke', the static grain filter);
|
|
89
|
+
* `pencil`/`marker`/`highlighter` round out the spanning set.
|
|
90
|
+
*/
|
|
91
|
+
export declare const BRUSHES: {
|
|
92
|
+
readonly pen: {
|
|
93
|
+
readonly weight: 6;
|
|
94
|
+
readonly weightJitter: 0.1;
|
|
95
|
+
readonly thinning: 0.15;
|
|
96
|
+
readonly taper: {
|
|
97
|
+
readonly start: 14;
|
|
98
|
+
readonly end: 14;
|
|
99
|
+
readonly ease: "out-cubic";
|
|
100
|
+
};
|
|
101
|
+
readonly ribbon: "stroke";
|
|
102
|
+
readonly opacity: 1;
|
|
103
|
+
readonly blend: "source-over";
|
|
104
|
+
readonly passes: 1;
|
|
105
|
+
readonly passOpacity: 0;
|
|
106
|
+
readonly grain: 0;
|
|
107
|
+
readonly grainFreq: 0.1;
|
|
108
|
+
readonly grainScale: 0;
|
|
109
|
+
readonly octaves: 2;
|
|
110
|
+
readonly roughness: 0.7;
|
|
111
|
+
readonly wobble: 1.2;
|
|
112
|
+
readonly segments: 9;
|
|
113
|
+
readonly cap: "round";
|
|
114
|
+
};
|
|
115
|
+
readonly pencil: {
|
|
116
|
+
readonly weight: 3;
|
|
117
|
+
readonly weightJitter: 0.3;
|
|
118
|
+
readonly thinning: 0.4;
|
|
119
|
+
readonly taper: {
|
|
120
|
+
readonly start: 8;
|
|
121
|
+
readonly end: 18;
|
|
122
|
+
readonly ease: "out-cubic";
|
|
123
|
+
};
|
|
124
|
+
readonly ribbon: "stroke";
|
|
125
|
+
readonly opacity: 0.6;
|
|
126
|
+
readonly blend: "source-over";
|
|
127
|
+
readonly passes: 1;
|
|
128
|
+
readonly passOpacity: 0;
|
|
129
|
+
readonly grain: 0.5;
|
|
130
|
+
readonly grainFreq: 0.42;
|
|
131
|
+
readonly grainScale: 1.5;
|
|
132
|
+
readonly octaves: 3;
|
|
133
|
+
readonly roughness: 1;
|
|
134
|
+
readonly wobble: 1.6;
|
|
135
|
+
readonly segments: 11;
|
|
136
|
+
readonly cap: "round";
|
|
137
|
+
};
|
|
138
|
+
readonly crayon: {
|
|
139
|
+
readonly weight: 16;
|
|
140
|
+
readonly weightJitter: 1;
|
|
141
|
+
readonly thinning: 0.25;
|
|
142
|
+
readonly taper: {
|
|
143
|
+
readonly start: 6;
|
|
144
|
+
readonly end: 6;
|
|
145
|
+
readonly ease: "linear";
|
|
146
|
+
};
|
|
147
|
+
readonly ribbon: "stroke";
|
|
148
|
+
readonly opacity: 0.8;
|
|
149
|
+
readonly blend: "source-over";
|
|
150
|
+
readonly passes: 2;
|
|
151
|
+
readonly passOpacity: 0.18;
|
|
152
|
+
readonly grain: 0.85;
|
|
153
|
+
readonly grainFreq: 0.16;
|
|
154
|
+
readonly grainScale: 2.6;
|
|
155
|
+
readonly octaves: 4;
|
|
156
|
+
readonly roughness: 1.5;
|
|
157
|
+
readonly wobble: 3;
|
|
158
|
+
readonly segments: 13;
|
|
159
|
+
readonly cap: "round";
|
|
160
|
+
};
|
|
161
|
+
readonly ring: {
|
|
162
|
+
readonly weight: 5;
|
|
163
|
+
readonly weightJitter: 0.6;
|
|
164
|
+
readonly thinning: 0.3;
|
|
165
|
+
readonly taper: {
|
|
166
|
+
readonly start: 8;
|
|
167
|
+
readonly end: 12;
|
|
168
|
+
readonly ease: "out-cubic";
|
|
169
|
+
};
|
|
170
|
+
readonly ribbon: "stroke";
|
|
171
|
+
readonly opacity: 0.55;
|
|
172
|
+
readonly blend: "source-over";
|
|
173
|
+
readonly passes: 1;
|
|
174
|
+
readonly passOpacity: 0;
|
|
175
|
+
readonly grain: 0.7;
|
|
176
|
+
readonly grainFreq: 0.18;
|
|
177
|
+
readonly grainScale: 1.8;
|
|
178
|
+
readonly octaves: 4;
|
|
179
|
+
readonly roughness: 1.4;
|
|
180
|
+
readonly wobble: 2.6;
|
|
181
|
+
readonly segments: 13;
|
|
182
|
+
readonly cap: "round";
|
|
183
|
+
};
|
|
184
|
+
readonly marker: {
|
|
185
|
+
readonly weight: 12;
|
|
186
|
+
readonly weightJitter: 0.2;
|
|
187
|
+
readonly thinning: 0.1;
|
|
188
|
+
readonly taper: {
|
|
189
|
+
readonly start: 4;
|
|
190
|
+
readonly end: 10;
|
|
191
|
+
readonly ease: "out-cubic";
|
|
192
|
+
};
|
|
193
|
+
readonly ribbon: "stroke";
|
|
194
|
+
readonly opacity: 0.92;
|
|
195
|
+
readonly blend: "source-over";
|
|
196
|
+
readonly passes: 1;
|
|
197
|
+
readonly passOpacity: 0;
|
|
198
|
+
readonly grain: 0.22;
|
|
199
|
+
readonly grainFreq: 0.09;
|
|
200
|
+
readonly grainScale: 1;
|
|
201
|
+
readonly octaves: 3;
|
|
202
|
+
readonly roughness: 1;
|
|
203
|
+
readonly wobble: 2.2;
|
|
204
|
+
readonly segments: 9;
|
|
205
|
+
readonly cap: "square";
|
|
206
|
+
};
|
|
207
|
+
readonly highlighter: {
|
|
208
|
+
readonly weight: 26;
|
|
209
|
+
readonly weightJitter: 0.05;
|
|
210
|
+
readonly thinning: 0;
|
|
211
|
+
readonly taper: {
|
|
212
|
+
readonly start: 0;
|
|
213
|
+
readonly end: 0;
|
|
214
|
+
readonly ease: "linear";
|
|
215
|
+
};
|
|
216
|
+
readonly ribbon: "stroke";
|
|
217
|
+
readonly opacity: 0.38;
|
|
218
|
+
readonly blend: "multiply";
|
|
219
|
+
readonly passes: 1;
|
|
220
|
+
readonly passOpacity: 0;
|
|
221
|
+
readonly grain: 0.12;
|
|
222
|
+
readonly grainFreq: 0.2;
|
|
223
|
+
readonly grainScale: 1.5;
|
|
224
|
+
readonly octaves: 2;
|
|
225
|
+
readonly roughness: 0.5;
|
|
226
|
+
readonly wobble: 1.4;
|
|
227
|
+
readonly segments: 9;
|
|
228
|
+
readonly cap: "square";
|
|
229
|
+
};
|
|
230
|
+
};
|
|
231
|
+
export type BrushName = keyof typeof BRUSHES;
|
|
232
|
+
/**
|
|
233
|
+
* Resolution order (KISS, deterministic): preset → object overrides → extra `o`.
|
|
234
|
+
* A string selects a preset; an object spreads over `pen`. Later wins.
|
|
235
|
+
*/
|
|
236
|
+
export declare const resolveBrush: (b: BrushName | Partial<Brush>, o?: Partial<Brush>) => Brush;
|
|
237
|
+
/**
|
|
238
|
+
* lerpBrush — the continuum proof (SPEC §12 acc-2). Linearly interpolate the
|
|
239
|
+
* scalar fields of two brushes; enums/taper/ribbon snap from `a` below 0.5, `b`
|
|
240
|
+
* at/above. Yields a sensible in-between ("inky crayon"), no NaN.
|
|
241
|
+
*/
|
|
242
|
+
export declare const lerpBrush: (a: Brush, b: Brush, t: number) => Brush;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* freehand.ts — the VENDORED perfect-freehand geometry core (MIT, tldraw).
|
|
3
|
+
* ─────────────────────────────────────────────────────────────────────────────
|
|
4
|
+
* SPEC §1.1 / §11: glass-ui ships ZERO hard deps. `perfect-freehand` is an
|
|
5
|
+
* OPTIONAL peer; its `getStroke` is the only one of the four engines that
|
|
6
|
+
* produces TRUE variable width (the swelling/tapering crayon nib). We vendor only
|
|
7
|
+
* its *geometry* core (a few hundred LOC, MIT) behind this L2 seam so:
|
|
8
|
+
*
|
|
9
|
+
* - the default pen/crayon presets (`ribbon: 'stroke'`) NEVER import it — the
|
|
10
|
+
* bundle treeshakes it away (the shipped stroke-crayon, `ds-crayon-handmark`),
|
|
11
|
+
* - the `ribbon: 'hull'` opt-in (the future width-variance upgrade) has a
|
|
12
|
+
* dependency-free, deterministic body engine already in place,
|
|
13
|
+
* - the pointer-capture half of the library (dead weight to us) never ships.
|
|
14
|
+
*
|
|
15
|
+
* This is the `getStroke` + `getStrokeOutlinePoints` + `getStrokePoints` core
|
|
16
|
+
* from perfect-freehand@1.2.3 (Steve Ruiz, MIT), transcribed to TypeScript with
|
|
17
|
+
* the `getSvgPathFromStroke` median-quad serialiser the references use. The
|
|
18
|
+
* algorithm is verbatim; only the module shape (named exports, vendored vec math)
|
|
19
|
+
* is glass-ui-local.
|
|
20
|
+
*
|
|
21
|
+
* @license MIT — perfect-freehand © Stephen Ruiz Ltd. https://github.com/steveruizok/perfect-freehand
|
|
22
|
+
*/
|
|
23
|
+
/** A point: [x, y] or [x, y, pressure]. */
|
|
24
|
+
export type InputPoint = [number, number] | [number, number, number];
|
|
25
|
+
export interface StrokeOptions {
|
|
26
|
+
size?: number;
|
|
27
|
+
thinning?: number;
|
|
28
|
+
smoothing?: number;
|
|
29
|
+
streamline?: number;
|
|
30
|
+
easing?: (t: number) => number;
|
|
31
|
+
simulatePressure?: boolean;
|
|
32
|
+
start?: {
|
|
33
|
+
cap?: boolean;
|
|
34
|
+
taper?: number | boolean;
|
|
35
|
+
easing?: (t: number) => number;
|
|
36
|
+
};
|
|
37
|
+
end?: {
|
|
38
|
+
cap?: boolean;
|
|
39
|
+
taper?: number | boolean;
|
|
40
|
+
easing?: (t: number) => number;
|
|
41
|
+
};
|
|
42
|
+
last?: boolean;
|
|
43
|
+
}
|
|
44
|
+
interface StrokePoint {
|
|
45
|
+
point: number[];
|
|
46
|
+
pressure: number;
|
|
47
|
+
distance: number;
|
|
48
|
+
vector: number[];
|
|
49
|
+
runningLength: number;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* getStrokePoints — resample the raw input into smoothed StrokePoints with
|
|
53
|
+
* running length + per-segment unit vectors (the streamline low-pass).
|
|
54
|
+
*/
|
|
55
|
+
export declare function getStrokePoints(points: InputPoint[], options?: StrokeOptions): StrokePoint[];
|
|
56
|
+
/**
|
|
57
|
+
* getStrokeOutlinePoints — walk the StrokePoints, emit left/right offset points
|
|
58
|
+
* (the variable-width hull), with tapered caps.
|
|
59
|
+
*/
|
|
60
|
+
export declare function getStrokeOutlinePoints(points: StrokePoint[], options?: StrokeOptions): number[][];
|
|
61
|
+
/** getStroke — the public entry: raw input → variable-width hull outline points. */
|
|
62
|
+
export declare function getStroke(points: InputPoint[], options?: StrokeOptions): number[][];
|
|
63
|
+
/**
|
|
64
|
+
* getSvgPathFromStroke — the canonical median-quad serialiser the references use:
|
|
65
|
+
* each segment's control point is the midpoint of two consecutive outline points,
|
|
66
|
+
* yielding a smooth closed fill `d`-string.
|
|
67
|
+
*/
|
|
68
|
+
export declare function getSvgPathFromStroke(stroke: number[][], closed?: boolean): string;
|
|
69
|
+
export {};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* geometry.ts — SEMANTIC shape → pencil-boil centerlines (L1, pure; SPEC §3).
|
|
3
|
+
* ─────────────────────────────────────────────────────────────────────────────
|
|
4
|
+
* A shape is a pure mapper: (semantic target) → L1 geometry. The renderer never
|
|
5
|
+
* knows what it drew — it sees only `Point[]`. Adding a shape = adding one switch
|
|
6
|
+
* arm; nothing downstream changes (texture + animation are shape-blind). This is
|
|
7
|
+
* the generality lever (Brush ⟂ Path).
|
|
8
|
+
*
|
|
9
|
+
* The marking coordinate space is 0..100 × 0..40, with `preserveAspectRatio="none"`
|
|
10
|
+
* so the <svg> stretches to the slotted word box (the SPEC §6.2 width-invariance
|
|
11
|
+
* contract). Two usage modes:
|
|
12
|
+
* - text mode (box == null): use the full viewBox (single-line underline/strike)
|
|
13
|
+
* - positioned mode (box = {x,y,w,h}): map an explicit rect (circle a datum)
|
|
14
|
+
*
|
|
15
|
+
* The circle arm rides pencil-boil 0.4.0's `ellipsePoints` (the hand-circle
|
|
16
|
+
* overshoot ring — the sole upstream geometry delta this component required).
|
|
17
|
+
*/
|
|
18
|
+
import { type WobbleOptions } from "@mkbabb/pencil-boil";
|
|
19
|
+
import type { HandShape, MarkBox } from "./types";
|
|
20
|
+
export declare const VB_W = 100;
|
|
21
|
+
export declare const VB_H = 40;
|
|
22
|
+
/**
|
|
23
|
+
* The hairline gap, as a fraction of the `.hm` box, between the MEASURED text
|
|
24
|
+
* baseline and the underline centerline. The underline rides just under the real
|
|
25
|
+
* glyph bottoms — a hand mark sits a few % of cap-height below the baseline, never
|
|
26
|
+
* through it (the E1 occlusion root: a constant `y=32` strikethroughs tight-leading
|
|
27
|
+
* display type because 80% of a `line-height:1.02` box IS the baseline).
|
|
28
|
+
*/
|
|
29
|
+
export declare const UNDERLINE_GAP = 0.06;
|
|
30
|
+
/** A shape maps to one or more centerlines (open polylines) or one closed ring. */
|
|
31
|
+
export interface ShapeGeom {
|
|
32
|
+
lines: [number, number][][];
|
|
33
|
+
closed: boolean;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Semantic shape → { lines, closed } in the marking space (or a positioned box).
|
|
37
|
+
*
|
|
38
|
+
* The text-mode underline anchors to a MEASURED baseline: `baselineFrac` is the
|
|
39
|
+
* slotted word's alphabetic baseline as a fraction of the `.hm` box height (the SFC
|
|
40
|
+
* measures it via ResizeObserver + `document.fonts.ready`). The underline y is then
|
|
41
|
+
* `VB_H × (baselineFrac + UNDERLINE_GAP)` — never the old hardcoded `32` (80% of the
|
|
42
|
+
* box), which struck through tight-leading headings. `null` ⇒ not yet measured: fall
|
|
43
|
+
* back to the legacy `VB_H − 8` constant so first paint (and jsdom/SSR) still renders
|
|
44
|
+
* a line, replaced the instant the measure lands.
|
|
45
|
+
*/
|
|
46
|
+
export declare function shapeGeom(shape: HandShape, opts: WobbleOptions, box?: MarkBox | null, baselineFrac?: number | null): ShapeGeom;
|
|
47
|
+
/** Boil one geometry: re-perturb the CACHED centerlines (anchored → no draw-on pop). */
|
|
48
|
+
export declare function boilLines({ lines, closed }: ShapeGeom, amount: number, seed: number): [number, number][][];
|
|
49
|
+
/** Serialize centerlines → one SVG `d` (multi-line shapes concat with a space). */
|
|
50
|
+
export declare function serialize(lines: [number, number][][], jagged?: boolean): string;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* handmark — the ./handmark barrel (SPEC §11).
|
|
3
|
+
* ─────────────────────────────────────────────────────────────────────────────
|
|
4
|
+
* `HandMark` is the generic export; `InkMark` is the prose alias the atlas/slides
|
|
5
|
+
* import so call sites read as prose (one implementation, zero divergence). The
|
|
6
|
+
* pure L1–L3 functions ship too — they are framework-free, directly usable in
|
|
7
|
+
* slides decks, D3 charts (call `shapeGeom`/`ellipsePoints` to ink a path), even
|
|
8
|
+
* canvas.
|
|
9
|
+
*
|
|
10
|
+
* The DEFAULT is `pen` (clean ink, grain:0 ⇒ no filter, zero extra dep). The
|
|
11
|
+
* `@mkbabb/pencil-boil` geometry + `perfect-freehand` body are OPTIONAL PEERS;
|
|
12
|
+
* only `ribbon:'hull'` touches the vendored pf core (treeshaken otherwise).
|
|
13
|
+
*/
|
|
14
|
+
export { default as HandMark, default as InkMark } from "./HandMark.vue";
|
|
15
|
+
export { BRUSHES, resolveBrush, lerpBrush, type Brush, type BrushName, type BlendMode, type TaperSpec, type StampFn, type InkPath, } from "./brush";
|
|
16
|
+
export { shapeGeom, serialize, boilLines, VB_W, VB_H, UNDERLINE_GAP, type ShapeGeom, } from "./geometry";
|
|
17
|
+
export { ink, type SVGFragment } from "./ink";
|
|
18
|
+
export { grainFilter, hasGrain } from "./texture";
|
|
19
|
+
export { getStroke, getStrokePoints, getSvgPathFromStroke, type StrokeOptions, type InputPoint, } from "./freehand";
|
|
20
|
+
export { useHandMark, normalizeProps, type UseHandMarkInput, type HandMarkCore, type BoilClock, } from "./useHandMark";
|
|
21
|
+
export type { HandMarkProps, HandShape, HandAnimation, MarkBox, } from "./types";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Brush, InkPath } from "./brush";
|
|
2
|
+
export interface SVGFragment {
|
|
3
|
+
paths: InkPath[];
|
|
4
|
+
filterId: string | null;
|
|
5
|
+
defs: string[];
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* ink — the only stage the brush fully drives. `jagged` serialises the stroke body
|
|
9
|
+
* with angular kinks (pointsToLinear) instead of the smooth Catmull-Rom bezier.
|
|
10
|
+
*/
|
|
11
|
+
export declare function ink(centerline: [number, number][], b: Brush, seed: number, color: string, filterId: string, jagged?: boolean): SVGFragment;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* texture.ts — the L3 grain as ONE parameterized SVG <filter> (pure; SPEC §4.2).
|
|
3
|
+
* ─────────────────────────────────────────────────────────────────────────────
|
|
4
|
+
* `grainFilter(id, b, seed)` returns the markup for ONE static, seeded <filter>
|
|
5
|
+
* driven entirely by the brush vector. The KISS invariant (the PEN-is-free law,
|
|
6
|
+
* SPEC §12 acc-4):
|
|
7
|
+
*
|
|
8
|
+
* grain <= 0 && grainScale <= 0 ⇒ returns '' ⇒ NO filter emitted ⇒ bare <path>.
|
|
9
|
+
*
|
|
10
|
+
* So pen/marker-lite get the cleanest vector edge at zero filter cost; pencil/
|
|
11
|
+
* crayon get a real broken-edge filter. SAME code path, field delta only — never
|
|
12
|
+
* an instrument `if`.
|
|
13
|
+
*
|
|
14
|
+
* The graph is the proven 5-stage pipeline from the `proto/_final` sandbox (it
|
|
15
|
+
* supersets the bare SPEC §4.2 graph with a trailing re-break displacement —
|
|
16
|
+
* `ds-crayon-handmark §4.4` keeps the proven one):
|
|
17
|
+
* 1. feTurbulence (warp) — low-freq fractal noise for edge wobble
|
|
18
|
+
* 2. feDisplacementMap (wob) — push the stroke edge by grainScale
|
|
19
|
+
* 3. feTurbulence (grain) — high-freq noise = paper tooth / wax grain
|
|
20
|
+
* 4. feColorMatrix (grainA) — threshold the grain into a hard alpha mask
|
|
21
|
+
* 5. feComposite + feDisplace — knock paper-through holes (operator="in") + re-break
|
|
22
|
+
*
|
|
23
|
+
* CRITICAL (the Δ4 gate, `ds-crayon-handmark §3`): this filter is STATIC + SEEDED.
|
|
24
|
+
* It rasters ONCE per (mount, resize, scheme flip) and is cached. The draw-on is a
|
|
25
|
+
* `clip-path: inset()` wipe that mutates only the clip — it NEVER animates
|
|
26
|
+
* `stroke-dashoffset` under the filter (which would re-raster the graph per frame).
|
|
27
|
+
* Boil does NOT ship on this register (`ds-crayon-handmark §5.3`).
|
|
28
|
+
*
|
|
29
|
+
* `id` MUST be per-instance (the component's `useId()`) so two marks never collide
|
|
30
|
+
* their <filter> namespaces — the glass-ui WatercolorDot idiom.
|
|
31
|
+
*
|
|
32
|
+
* The grain sub-seed is derived (`seed ^ 0x85eb`) per SPEC §7, so one top seed
|
|
33
|
+
* re-rolls the grain coherently with the centerline wobble.
|
|
34
|
+
*/
|
|
35
|
+
import type { Brush } from "./brush";
|
|
36
|
+
/** @returns SVG <filter> markup, or '' when the brush is clean ink (pen). */
|
|
37
|
+
export declare function grainFilter(id: string, b: Brush, seed: number): string;
|
|
38
|
+
/** Does this brush emit a grain filter? (the pen-is-free predicate). */
|
|
39
|
+
export declare function hasGrain(b: Brush): boolean;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* types.ts — the public API surface (SPEC §6). Pure types, 0 runtime.
|
|
3
|
+
* ─────────────────────────────────────────────────────────────────────────────
|
|
4
|
+
* The L5 surface steals rough-notation's *vocabulary* (annotate-style props +
|
|
5
|
+
* ordered groups), not its code. Every prop has a per-brush default, so the
|
|
6
|
+
* common call is one tag: <HandMark>who pays in</HandMark>.
|
|
7
|
+
*/
|
|
8
|
+
import type { Brush, BrushName } from "./brush";
|
|
9
|
+
/** A target rect in the 0..100 × 0..40 marking space (positioned mode). */
|
|
10
|
+
export interface MarkBox {
|
|
11
|
+
x: number;
|
|
12
|
+
y: number;
|
|
13
|
+
w: number;
|
|
14
|
+
h: number;
|
|
15
|
+
}
|
|
16
|
+
export type HandShape = "underline" | "strikethrough" | "highlight" | "circle" | "box" | "bracket" | "path";
|
|
17
|
+
export type HandAnimation = "none" | "draw-on" | "boil" | "draw-then-boil";
|
|
18
|
+
export interface HandMarkProps {
|
|
19
|
+
/** 'pen'(default) | preset name | full/partial Brush object. */
|
|
20
|
+
brush?: BrushName | Partial<Brush>;
|
|
21
|
+
/** default 'underline'. */
|
|
22
|
+
shape?: HandShape;
|
|
23
|
+
/** ANY CSS color. default 'currentColor'. */
|
|
24
|
+
color?: string;
|
|
25
|
+
/** procedural variant — deterministic. default 1. */
|
|
26
|
+
seed?: number;
|
|
27
|
+
/** spread over the resolved brush (3rd resolution level). */
|
|
28
|
+
overrides?: Partial<Brush>;
|
|
29
|
+
/** default 'none' (the static-masthead default). */
|
|
30
|
+
animation?: HandAnimation;
|
|
31
|
+
/** draw-on duration. default 800. */
|
|
32
|
+
drawMs?: number;
|
|
33
|
+
/** draw-on start delay. default 0. */
|
|
34
|
+
drawDelayMs?: number;
|
|
35
|
+
/** draw-on trigger. default 'visible' (IntersectionObserver). */
|
|
36
|
+
appear?: "mount" | "visible" | "manual";
|
|
37
|
+
/** boil frame rate. default 8 (≈125ms). */
|
|
38
|
+
boilFps?: number;
|
|
39
|
+
/** distinct boil frames. default 3. */
|
|
40
|
+
boilFrames?: number;
|
|
41
|
+
/** override brush.roughness. */
|
|
42
|
+
roughness?: number;
|
|
43
|
+
/** wobble resolution. default per-brush. */
|
|
44
|
+
segments?: number;
|
|
45
|
+
/** angular kinks vs smooth bezier. default false. */
|
|
46
|
+
jagged?: boolean;
|
|
47
|
+
/** POSITIONED mode (circle a datum): explicit target rect. */
|
|
48
|
+
box?: MarkBox;
|
|
49
|
+
/** shape:'path' escape hatch — arbitrary SVG `d` (wins over shape). */
|
|
50
|
+
path?: string;
|
|
51
|
+
/** arbitrary point stream → brush ink. */
|
|
52
|
+
points?: [number, number][];
|
|
53
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* useHandMark.ts — the headless reactive core (L2/L3/L4; SPEC §9).
|
|
3
|
+
* ─────────────────────────────────────────────────────────────────────────────
|
|
4
|
+
* Sits between the props and the SFC template so a future React/web-component skin
|
|
5
|
+
* reuses L1–L4. It orchestrates: resolve brush → shapeGeom → ink → animation. It
|
|
6
|
+
* owns NO DOM (the SFC anchors/measures/mounts the filter); it owns the reactive
|
|
7
|
+
* pipeline + the draw-on / boil state machine.
|
|
8
|
+
*
|
|
9
|
+
* Two draw-on mechanisms, picked by a FIELD (never an instrument `if`):
|
|
10
|
+
* - clean ink (no grain): `stroke-dashoffset` on `pathLength="1"` — the slides
|
|
11
|
+
* recipe, geometry-agnostic, compositor-cheap, no filter to re-raster.
|
|
12
|
+
* - grained ink (crayon): a `clip-path: inset()` WIPE — the filter rasters ONCE
|
|
13
|
+
* and the reveal mutates only the clip (`ds-crayon-handmark §5.1`). NEVER
|
|
14
|
+
* dashoffset under a filter (it would re-raster the graph per frame — the Δ4
|
|
15
|
+
* gate).
|
|
16
|
+
*
|
|
17
|
+
* PRM: every draw-on collapses to instant (finished static state); boil no-ops
|
|
18
|
+
* (`useLineBoil.start()` early-returns under reduced motion).
|
|
19
|
+
*/
|
|
20
|
+
import { type Ref } from "vue";
|
|
21
|
+
import { type Brush, type BrushName } from "./brush";
|
|
22
|
+
/**
|
|
23
|
+
* The boil clock surface the SFC binds — the `useLineBoil` return shape, declared
|
|
24
|
+
* structurally over glass-ui's OWN `Ref` (pencil-boil ships a nested `@vue`, so its
|
|
25
|
+
* `Ref` symbol differs; the no-op stub is built with this `ref`, hence the surface
|
|
26
|
+
* is named here rather than `ReturnType<typeof useLineBoil>`).
|
|
27
|
+
*/
|
|
28
|
+
export interface BoilClock {
|
|
29
|
+
currentFrame: Ref<number>;
|
|
30
|
+
start: () => void;
|
|
31
|
+
stop: () => void;
|
|
32
|
+
}
|
|
33
|
+
import { type ShapeGeom } from "./geometry";
|
|
34
|
+
import { type SVGFragment } from "./ink";
|
|
35
|
+
import type { HandAnimation, HandMarkProps, HandShape, MarkBox } from "./types";
|
|
36
|
+
export interface UseHandMarkInput {
|
|
37
|
+
brush: BrushName | Partial<Brush>;
|
|
38
|
+
shape: HandShape;
|
|
39
|
+
color: string;
|
|
40
|
+
seed: number;
|
|
41
|
+
overrides?: Partial<Brush>;
|
|
42
|
+
animation: HandAnimation;
|
|
43
|
+
boilFps: number;
|
|
44
|
+
boilFrames: number;
|
|
45
|
+
roughness: number | null;
|
|
46
|
+
segments: number | null;
|
|
47
|
+
jagged: boolean;
|
|
48
|
+
box: MarkBox | null;
|
|
49
|
+
path: string | null;
|
|
50
|
+
filterId: string;
|
|
51
|
+
/**
|
|
52
|
+
* The MEASURED text baseline as a fraction of the `.hm` box height (text-mode
|
|
53
|
+
* underline anchor). `null` until the SFC measures it (ResizeObserver +
|
|
54
|
+
* `document.fonts.ready`) — geometry falls back to the legacy constant for that
|
|
55
|
+
* one pre-measure frame. Ignored in positioned (`box`) mode.
|
|
56
|
+
*/
|
|
57
|
+
baselineFrac: number | null;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Normalise raw HandMarkProps (with their defaults applied) into the core input.
|
|
61
|
+
* `baselineFrac` is the SFC's MEASURED text baseline (text-mode underline anchor) —
|
|
62
|
+
* passed in (not a prop) because it is a runtime measurement, `null` until measured.
|
|
63
|
+
*/
|
|
64
|
+
export declare function normalizeProps(props: HandMarkProps, filterId: string, baselineFrac?: number | null): UseHandMarkInput;
|
|
65
|
+
export interface HandMarkCore {
|
|
66
|
+
/** the resolved effective brush vector. */
|
|
67
|
+
brush: Ref<Brush>;
|
|
68
|
+
/** the static base geometry (boil re-perturbs THIS). */
|
|
69
|
+
baseGeom: Ref<ShapeGeom>;
|
|
70
|
+
/** the live SVG fragment (paths + filter defs). */
|
|
71
|
+
fragment: Ref<SVGFragment>;
|
|
72
|
+
/** the live `d` (escape-hatch path > boiled geometry > static base). */
|
|
73
|
+
pathD: Ref<string>;
|
|
74
|
+
/** does the brush emit a grain filter? (drives the draw-on mechanism). */
|
|
75
|
+
grained: Ref<boolean>;
|
|
76
|
+
/** the draw-on mechanism for this mark: dashoffset (pen) | clip (crayon). */
|
|
77
|
+
drawKind: Ref<"dashoffset" | "clip">;
|
|
78
|
+
/** does this animation draw on at all? */
|
|
79
|
+
draws: Ref<boolean>;
|
|
80
|
+
/** does this animation boil? */
|
|
81
|
+
boils: Ref<boolean>;
|
|
82
|
+
/** the boil clock (a real `useLineBoil` only when the mark boils; else a no-op stub). */
|
|
83
|
+
boil: BoilClock;
|
|
84
|
+
/** arm/disarm boil (draw-then-boil holds it until the draw finishes). */
|
|
85
|
+
boilArmed: Ref<boolean>;
|
|
86
|
+
}
|
|
87
|
+
export declare function useHandMark(input: Ref<UseHandMarkInput>): HandMarkCore;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { HeaderRibbonProps } from "./types";
|
|
2
|
+
declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {
|
|
3
|
+
pinned: boolean;
|
|
4
|
+
toggled: boolean;
|
|
5
|
+
}, __VLS_7: {};
|
|
6
|
+
type __VLS_Slots = {} & {
|
|
7
|
+
left?: (props: typeof __VLS_1) => any;
|
|
8
|
+
} & {
|
|
9
|
+
items?: (props: typeof __VLS_3) => any;
|
|
10
|
+
} & {
|
|
11
|
+
anchor?: (props: typeof __VLS_5) => any;
|
|
12
|
+
} & {
|
|
13
|
+
items?: (props: typeof __VLS_7) => any;
|
|
14
|
+
};
|
|
15
|
+
declare const __VLS_base: import("vue").DefineComponent<HeaderRibbonProps, {
|
|
16
|
+
isPinned: import("vue").Ref<boolean, boolean>;
|
|
17
|
+
isExpanded: import("vue").Ref<boolean, boolean>;
|
|
18
|
+
isVisible: import("vue").ComputedRef<boolean>;
|
|
19
|
+
isToggled: import("vue").Ref<boolean, boolean>;
|
|
20
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderRibbonProps> & Readonly<{}>, {
|
|
21
|
+
position: import("./types").HeaderRibbonPosition;
|
|
22
|
+
hideTimeoutMs: number;
|
|
23
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
24
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
25
|
+
declare const _default: typeof __VLS_export;
|
|
26
|
+
export default _default;
|
|
27
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
28
|
+
new (): {
|
|
29
|
+
$slots: S;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type HeaderRibbonPosition = "left" | "right";
|
|
2
|
+
export interface HeaderRibbonProps {
|
|
3
|
+
/** Side of the viewport the ribbon anchors against. Defaults to `"left"`. */
|
|
4
|
+
position?: HeaderRibbonPosition;
|
|
5
|
+
/** Milliseconds after the pointer leaves the ribbon before items collapse. Defaults to `2000`. */
|
|
6
|
+
hideTimeoutMs?: number;
|
|
7
|
+
}
|
|
@@ -28,8 +28,8 @@ export type InstrumentChassisVariant = "glass" | "spine";
|
|
|
28
28
|
* the `<ChassisDivider>` adjacent to each — emit markup only when bound.
|
|
29
29
|
* I gate `<header>`, `<footer>`, and the two dividers on `$slots.strip` /
|
|
30
30
|
* `$slots.control` presence, so empty-slot consumers don't have to suppress
|
|
31
|
-
* the markup with `display: none` overrides
|
|
32
|
-
*
|
|
31
|
+
* the markup with `display: none` overrides. Mirrors the `v-if="$slots.status"`
|
|
32
|
+
* idiom InstrumentRail established.
|
|
33
33
|
*
|
|
34
34
|
* The chassis owns the `--phase-color` cascade via `data-phase`; phase label,
|
|
35
35
|
* hero number, and phase progress fill all read it through one CSS custom
|