@heyramzi/ui 2.11.1 → 2.11.2
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/agents/helpers.js +38 -38
- package/dist/agents/page-state.js +49 -50
- package/dist/agents/vendor/color.js +146 -127
- package/dist/agents/vendor/draw.js +617 -508
- package/dist/agents/vendor/engine.js +698 -599
- package/dist/agents/vendor/mesh.js +653 -683
- package/dist/agents/vendor/plastic.js +3913 -3112
- package/dist/agents/vendor/presets.js +163 -164
- package/dist/agents/vendor/shapes.js +21 -20
- package/dist/agents/vendor/ticker.js +41 -42
- package/dist/agents/vendor/types.js +1 -0
- package/dist/agents/vendor/wear.js +1421 -1448
- package/dist/ai/confirmation/confirmation-context.svelte.js +6 -6
- package/dist/ai/confirmation/index.js +3 -1
- package/dist/ai/index.js +33 -0
- package/dist/ai/prompt-input/index.js +3 -1
- package/dist/ai/reasoning/index.js +3 -1
- package/dist/ai/reasoning/reasoning-context.svelte.js +6 -6
- package/dist/ai/suggestion/index.js +3 -1
- package/dist/ai/typing-dots/index.js +3 -1
- package/dist/animations/text-swap.js +24 -24
- package/dist/brand/index.js +54 -48
- package/dist/canvas/card/resize.js +5 -3
- package/dist/canvas/edges/edge-path.js +255 -242
- package/dist/canvas/editor/context-menu.js +39 -36
- package/dist/canvas/editor/dispatch.svelte.js +154 -151
- package/dist/canvas/editor/editor-context.js +7 -2
- package/dist/canvas/editor/editor-mode.js +1 -0
- package/dist/canvas/editor/frame.js +73 -76
- package/dist/canvas/editor/hand-context.js +5 -2
- package/dist/canvas/editor/history-core.js +163 -191
- package/dist/canvas/editor/keymap.js +95 -169
- package/dist/canvas/editor/layout-actions.js +143 -144
- package/dist/canvas/editor/lock.js +52 -51
- package/dist/canvas/editor/rebase.js +217 -240
- package/dist/canvas/editor/style.js +132 -137
- package/dist/canvas/editor/text-field-context.js +7 -2
- package/dist/canvas/editor/z-order.js +65 -70
- package/dist/canvas/headless/alignment.js +22 -16
- package/dist/canvas/headless/break-apart-find.js +286 -279
- package/dist/canvas/headless/break-apart-pieces.js +62 -58
- package/dist/canvas/headless/break-apart-plan.js +299 -325
- package/dist/canvas/headless/break-apart-style.js +75 -70
- package/dist/canvas/headless/break-apart.js +188 -181
- package/dist/canvas/headless/canvas-cleanup.js +78 -58
- package/dist/canvas/headless/edge-anchors.js +115 -116
- package/dist/canvas/headless/edge-memo.js +24 -22
- package/dist/canvas/headless/edge-serialization.js +17 -27
- package/dist/canvas/headless/figure-geometry.js +232 -264
- package/dist/canvas/headless/fit-viewport.js +84 -67
- package/dist/canvas/headless/grid.js +88 -86
- package/dist/canvas/headless/icon-node.js +44 -36
- package/dist/canvas/headless/index.js +1 -0
- package/dist/canvas/headless/linkify.js +17 -19
- package/dist/canvas/headless/pen-marks.js +101 -95
- package/dist/canvas/headless/sketch.js +231 -209
- package/dist/canvas/headless/snap-guides.js +99 -83
- package/dist/canvas/headless/svg-figure.js +133 -117
- package/dist/canvas/headless/table-layout.js +146 -107
- package/dist/canvas/index.js +2 -0
- package/dist/canvas/lod/lod-mode.svelte.js +20 -18
- package/dist/canvas/lod/render-all.svelte.js +36 -39
- package/dist/canvas/ops/arrange.js +78 -71
- package/dist/canvas/ops/ops.js +260 -255
- package/dist/canvas/pen/colors.js +37 -35
- package/dist/canvas/pen/eraser.js +28 -27
- package/dist/canvas/pen/geometry.js +120 -130
- package/dist/canvas/pen/index.js +1 -0
- package/dist/canvas/pen/ops.js +11 -11
- package/dist/canvas/pen/pen-session.js +150 -159
- package/dist/canvas/pen/plugin.js +107 -104
- package/dist/canvas/pen/shapes.js +73 -68
- package/dist/canvas/pen/stroke-path.js +32 -30
- package/dist/canvas/pen/types.js +21 -21
- package/dist/canvas/pen/ui.js +10 -8
- package/dist/canvas/plugin.js +46 -46
- package/dist/canvas/screen/glyphs.js +12 -11
- package/dist/canvas/screen/labels.js +22 -22
- package/dist/canvas/screen/parts.js +98 -111
- package/dist/canvas/screen/plugin.js +47 -56
- package/dist/canvas/screen/types.js +30 -35
- package/dist/canvas/screen/ui.js +7 -7
- package/dist/canvas/test-utils.js +14 -14
- package/dist/canvas/types.js +1 -0
- package/dist/canvas/ui/forward-wheel.js +24 -25
- package/dist/canvas/ui/icons.js +64 -131
- package/dist/canvas/ui/place-panel.js +58 -49
- package/dist/canvas/ui/shortcut-tip.js +14 -12
- package/dist/canvas/ui/tools.js +300 -385
- package/dist/charts/dashboard/chart.js +4 -0
- package/dist/charts/dashboard/data-table.js +11 -0
- package/dist/charts/dashboard/windows.js +8 -3
- package/dist/charts/edge-fade.js +10 -5
- package/dist/charts/hover-band.js +16 -11
- package/dist/charts/index.js +0 -1
- package/dist/charts/motion.js +11 -7
- package/dist/charts/primitives/chart-utils.js +12 -12
- package/dist/components/copy/clipboard.js +32 -32
- package/dist/components/copy/copied.svelte.js +31 -23
- package/dist/components/data-table/data-table.js +39 -39
- package/dist/components/docs/index.js +4 -0
- package/dist/components/docs/scroll-spy.svelte.js +73 -68
- package/dist/components/list-page/filter-section.js +4 -1
- package/dist/components/list-page/index.js +2 -0
- package/dist/components/list-page/list-table.js +7 -2
- package/dist/components/list-page/queue-rail.js +14 -0
- package/dist/components/list-page/section-host.js +4 -2
- package/dist/components/list-page/step.js +4 -3
- package/dist/components/list-page/types.js +1 -0
- package/dist/components/picker/trigger.js +48 -30
- package/dist/components/picker/types.js +1 -0
- package/dist/components/segmented/collapse.js +38 -27
- package/dist/components/segmented/index.js +8 -0
- package/dist/components/segmented/segmented.js +67 -42
- package/dist/components/star-rating-input/index.js +3 -1
- package/dist/components/table-view/types.js +1 -0
- package/dist/components/tags-input/tags.js +81 -69
- package/dist/components/theme/index.js +4 -0
- package/dist/components/toolbar/index.js +4 -0
- package/dist/components/toolbar/toolbar-trigger.js +14 -1
- package/dist/editor/anchors.js +17 -13
- package/dist/editor/block-id.js +52 -51
- package/dist/editor/block-ops.js +108 -80
- package/dist/editor/doc-blocks.js +155 -166
- package/dist/editor/extensions.js +139 -180
- package/dist/editor/index.js +4 -0
- package/dist/editor/markdown-test-helpers.js +4 -2
- package/dist/editor/markdown.js +420 -408
- package/dist/editor/serializer.js +204 -200
- package/dist/editor/slash-items.js +89 -101
- package/dist/editor/youtube-url.js +25 -20
- package/dist/effects/animated-beam/path-calculator.svelte.js +43 -38
- package/dist/effects/animated-beam/types.js +1 -0
- package/dist/effects/border-beam/css.js +92 -78
- package/dist/effects/border-beam/presets.js +1705 -1720
- package/dist/effects/border-beam/register-properties.js +43 -33
- package/dist/effects/border-beam/types.js +1 -0
- package/dist/effects/image-comparison/compare.js +3 -2
- package/dist/effects/image-reveal/types.js +1 -0
- package/dist/effects/magnetic/magnetic.js +58 -52
- package/dist/effects/reveal/observe.js +50 -40
- package/dist/effects/reveal/types.js +1 -0
- package/dist/effects/shader-gradient/color.js +36 -29
- package/dist/effects/shader-gradient/renderer.js +384 -295
- package/dist/effects/shader-gradient/shaders.js +31 -0
- package/dist/effects/shader-gradient/types.js +1 -0
- package/dist/icons/apple-symbol-exports.js +99 -124
- package/dist/icons/sf-symbols.js +357 -461
- package/dist/icons/trades.js +43 -28
- package/dist/inbox/index.js +1 -0
- package/dist/inbox/logic.js +126 -122
- package/dist/inbox/types.js +43 -43
- package/dist/lib/arrive.js +19 -12
- package/dist/lib/icon-types.js +1 -0
- package/dist/lib/initials.js +16 -10
- package/dist/lib/layout.js +5 -0
- package/dist/lib/panel.js +13 -0
- package/dist/lib/result.js +22 -22
- package/dist/lib/sliding-pill.js +59 -44
- package/dist/lib/theme-transition.js +43 -43
- package/dist/lib/tone.js +31 -24
- package/dist/lib/utils.js +3 -1
- package/dist/onboarding/define-tours.js +24 -23
- package/dist/onboarding/onboarding.svelte.js +16 -12
- package/dist/onboarding/pick.js +10 -6
- package/dist/onboarding/stores.js +40 -41
- package/dist/onboarding/wait.js +24 -23
- package/dist/panel/side-panel-types.js +1 -0
- package/dist/record/demo-data.js +459 -486
- package/dist/record/fields.js +129 -131
- package/dist/record/format.js +70 -82
- package/dist/record/gutter.js +1 -0
- package/dist/record/kinds.js +95 -105
- package/dist/record/logic.js +238 -219
- package/dist/record/types.js +49 -48
- package/dist/shadcn/accordion/index.js +3 -1
- package/dist/shadcn/alert/index.js +3 -1
- package/dist/shadcn/alert-dialog/index.js +3 -1
- package/dist/shadcn/attachment/index.js +3 -1
- package/dist/shadcn/avatar/index.js +3 -1
- package/dist/shadcn/breadcrumb/index.js +3 -1
- package/dist/shadcn/bubble/index.js +3 -1
- package/dist/shadcn/button/index.js +3 -1
- package/dist/shadcn/calendar/index.js +3 -1
- package/dist/shadcn/card/index.js +3 -1
- package/dist/shadcn/checkbox/index.js +3 -1
- package/dist/shadcn/code-block/index.js +3 -1
- package/dist/shadcn/collapsible/index.js +3 -1
- package/dist/shadcn/command/index.js +4 -1
- package/dist/shadcn/context-menu/index.js +3 -1
- package/dist/shadcn/dialog/index.js +3 -1
- package/dist/shadcn/dropdown-menu/menu-item.js +40 -20
- package/dist/shadcn/empty/index.js +3 -1
- package/dist/shadcn/field/index.js +3 -1
- package/dist/shadcn/hooks/highlighter.js +77 -75
- package/dist/shadcn/hooks/is-mobile.svelte.js +3 -3
- package/dist/shadcn/hooks/use-highlighted-code.svelte.js +62 -62
- package/dist/shadcn/input/index.js +3 -1
- package/dist/shadcn/kbd/index.js +3 -1
- package/dist/shadcn/label/index.js +3 -1
- package/dist/shadcn/marker/index.js +3 -1
- package/dist/shadcn/message/index.js +3 -1
- package/dist/shadcn/message-scroller/index.js +3 -1
- package/dist/shadcn/popover/index.js +3 -1
- package/dist/shadcn/progress/index.js +3 -1
- package/dist/shadcn/progress/tone.js +8 -7
- package/dist/shadcn/radio-group/index.js +3 -1
- package/dist/shadcn/scroll-area/index.js +3 -1
- package/dist/shadcn/select/index.js +3 -1
- package/dist/shadcn/separator/index.js +3 -1
- package/dist/shadcn/sheet/index.js +3 -1
- package/dist/shadcn/sidebar/context.svelte.js +42 -28
- package/dist/shadcn/sidebar/index.js +3 -1
- package/dist/shadcn/skeleton/index.js +3 -1
- package/dist/shadcn/slider/index.js +3 -1
- package/dist/shadcn/switch/index.js +3 -1
- package/dist/shadcn/table/index.js +3 -1
- package/dist/shadcn/tabs/index.js +3 -1
- package/dist/shadcn/textarea/index.js +3 -1
- package/dist/shadcn/toggle/index.js +3 -1
- package/dist/shadcn/toggle-group/index.js +3 -1
- package/dist/shadcn/tooltip/context.js +7 -2
- package/dist/shadcn/tooltip/index.js +3 -1
- package/dist/shadcn/trace/index.js +3 -1
- package/dist/slides/bridges.js +65 -59
- package/dist/slides/deck-controller.svelte.js +210 -207
- package/dist/slides/export/capture.js +66 -71
- package/dist/slides/export/ffmpeg.js +76 -72
- package/dist/slides/export/index.js +3 -0
- package/dist/slides/export/launch.js +9 -6
- package/dist/slides/export/pdf.js +60 -54
- package/dist/slides/export/types.js +1 -0
- package/dist/slides/labels.js +24 -24
- package/dist/slides/layout.js +39 -41
- package/dist/slides/model.js +9 -7
- package/dist/slides/navigation.js +78 -73
- package/dist/slides/types.js +2 -2
- package/dist/status/define-statuses.js +18 -14
- package/dist/status/status-types.js +1 -0
- package/dist/test-setup.js +24 -20
- package/dist/thread/logic.js +73 -77
- package/dist/thread/types.js +21 -21
- package/dist/work/board-order.js +94 -90
- package/dist/work/dates.js +16 -9
- package/dist/work/detail/detail-types.js +18 -18
- package/dist/work/docs/edited.js +32 -29
- package/dist/work/docs/index.js +4 -0
- package/dist/work/docs/labels.js +34 -34
- package/dist/work/docs/menu.js +113 -106
- package/dist/work/docs/outline.js +39 -29
- package/dist/work/gantt/logic.js +211 -235
- package/dist/work/inbox/inbox-logic.js +71 -75
- package/dist/work/inbox/inbox-statuses.js +75 -72
- package/dist/work/inbox/inbox-types.js +1 -0
- package/dist/work/kanban-drag.js +27 -22
- package/dist/work/kanban-types.js +1 -0
- package/dist/work/presets/sales.js +36 -32
- package/dist/work/reorder.js +9 -8
- package/dist/work/task-types.js +1 -0
- package/dist/work/time/duration.js +51 -46
- package/dist/work/time/time-types.js +23 -23
- package/dist/work/use-kanban-dnd.svelte.js +126 -125
- package/package.json +3 -1
- package/src/components/list-page/master-detail.svelte +3 -1
- package/src/components/list-page/rail-row.svelte +4 -4
- package/src/editor/markdown.ts +30 -35
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { getContext, setContext } from "svelte";
|
|
2
2
|
const CONFIRMATION_CONTEXT_KEY = Symbol("confirmation-context");
|
|
3
3
|
export function setConfirmationContext(value) {
|
|
4
|
-
|
|
4
|
+
setContext(CONFIRMATION_CONTEXT_KEY, value);
|
|
5
5
|
}
|
|
6
6
|
export function getConfirmationContext() {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
const context = getContext(CONFIRMATION_CONTEXT_KEY);
|
|
8
|
+
if (!context) {
|
|
9
|
+
throw new Error("Confirmation parts must be used inside a <Confirmation>.");
|
|
10
|
+
}
|
|
11
|
+
return context;
|
|
12
12
|
}
|
|
@@ -6,4 +6,6 @@ import ConfirmationRejected from "../../../src/ai/confirmation/ConfirmationRejec
|
|
|
6
6
|
import ConfirmationFailed from "../../../src/ai/confirmation/ConfirmationFailed.svelte";
|
|
7
7
|
import ConfirmationActions from "../../../src/ai/confirmation/ConfirmationActions.svelte";
|
|
8
8
|
import ConfirmationAction from "../../../src/ai/confirmation/ConfirmationAction.svelte";
|
|
9
|
-
export { Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationFailed, ConfirmationActions, ConfirmationAction,
|
|
9
|
+
export { Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationFailed, ConfirmationActions, ConfirmationAction,
|
|
10
|
+
//
|
|
11
|
+
Confirmation as Root, ConfirmationTitle as Title, ConfirmationRequest as Request, ConfirmationAccepted as Accepted, ConfirmationRejected as Rejected, ConfirmationFailed as Failed, ConfirmationActions as Actions, ConfirmationAction as Action };
|
package/dist/ai/index.js
CHANGED
|
@@ -1,11 +1,44 @@
|
|
|
1
|
+
// =========================
|
|
2
|
+
// TYPING DOTS
|
|
3
|
+
// =========================
|
|
1
4
|
export { TypingDots } from "./typing-dots/index.js";
|
|
5
|
+
// =========================
|
|
6
|
+
// RESPONSE (markdown)
|
|
7
|
+
// =========================
|
|
2
8
|
export { Response } from "./response/index.js";
|
|
9
|
+
// =========================
|
|
10
|
+
// SUGGESTION
|
|
11
|
+
// =========================
|
|
3
12
|
export { Suggestion, Suggestions } from "./suggestion/index.js";
|
|
13
|
+
// =========================
|
|
14
|
+
// PROMPT INPUT
|
|
15
|
+
// =========================
|
|
4
16
|
export { PromptInput, PromptInputBody, PromptInputToolbar, PromptInputTextarea, PromptInputSubmit } from "./prompt-input/index.js";
|
|
17
|
+
// =========================
|
|
18
|
+
// CONFIRMATION
|
|
19
|
+
// =========================
|
|
5
20
|
export { Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationActions, ConfirmationAction } from "./confirmation/index.js";
|
|
21
|
+
// =========================
|
|
22
|
+
// THINKING DOTS
|
|
23
|
+
// =========================
|
|
6
24
|
export { ThinkingDots } from "./thinking-dots/index.js";
|
|
25
|
+
// =========================
|
|
26
|
+
// VOICE WAVEFORM
|
|
27
|
+
// =========================
|
|
7
28
|
export { VoiceWaveform } from "./voice-waveform/index.js";
|
|
29
|
+
// =========================
|
|
30
|
+
// REASONING
|
|
31
|
+
// =========================
|
|
8
32
|
export { Reasoning, ReasoningTrigger, ReasoningContent } from "./reasoning/index.js";
|
|
33
|
+
// =========================
|
|
34
|
+
// LOADING STATE
|
|
35
|
+
// =========================
|
|
9
36
|
export { PixelLoader } from "./loading-state/index.js";
|
|
37
|
+
// =========================
|
|
38
|
+
// AI BUTTON
|
|
39
|
+
// =========================
|
|
10
40
|
export { AiButton } from "./ai-button/index.js";
|
|
41
|
+
// =========================
|
|
42
|
+
// GENERATION PROGRESS
|
|
43
|
+
// =========================
|
|
11
44
|
export { GenerationProgress } from "./generation-progress/index.js";
|
|
@@ -3,4 +3,6 @@ import PromptInputBody from "../../../src/ai/prompt-input/PromptInputBody.svelte
|
|
|
3
3
|
import PromptInputToolbar from "../../../src/ai/prompt-input/PromptInputToolbar.svelte";
|
|
4
4
|
import PromptInputTextarea from "../../../src/ai/prompt-input/PromptInputTextarea.svelte";
|
|
5
5
|
import PromptInputSubmit from "../../../src/ai/prompt-input/PromptInputSubmit.svelte";
|
|
6
|
-
export { PromptInput, PromptInputBody, PromptInputToolbar, PromptInputTextarea, PromptInputSubmit,
|
|
6
|
+
export { PromptInput, PromptInputBody, PromptInputToolbar, PromptInputTextarea, PromptInputSubmit,
|
|
7
|
+
//
|
|
8
|
+
PromptInput as Root, PromptInputBody as Body, PromptInputToolbar as Toolbar, PromptInputTextarea as Textarea, PromptInputSubmit as Submit };
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import Reasoning from "../../../src/ai/reasoning/Reasoning.svelte";
|
|
2
2
|
import ReasoningTrigger from "../../../src/ai/reasoning/ReasoningTrigger.svelte";
|
|
3
3
|
import ReasoningContent from "../../../src/ai/reasoning/ReasoningContent.svelte";
|
|
4
|
-
export { Reasoning, ReasoningTrigger, ReasoningContent,
|
|
4
|
+
export { Reasoning, ReasoningTrigger, ReasoningContent,
|
|
5
|
+
//
|
|
6
|
+
Reasoning as Root, ReasoningTrigger as Trigger, ReasoningContent as Content };
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { getContext, setContext } from "svelte";
|
|
2
2
|
const REASONING_CONTEXT_KEY = Symbol("reasoning-context");
|
|
3
3
|
export function setReasoningContext(value) {
|
|
4
|
-
|
|
4
|
+
setContext(REASONING_CONTEXT_KEY, value);
|
|
5
5
|
}
|
|
6
6
|
export function getReasoningContext() {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
const context = getContext(REASONING_CONTEXT_KEY);
|
|
8
|
+
if (!context) {
|
|
9
|
+
throw new Error("Reasoning parts must be used inside a <Reasoning>.");
|
|
10
|
+
}
|
|
11
|
+
return context;
|
|
12
12
|
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
import Suggestion from "../../../src/ai/suggestion/Suggestion.svelte";
|
|
2
2
|
import Suggestions from "../../../src/ai/suggestion/Suggestions.svelte";
|
|
3
|
-
export { Suggestion, Suggestions,
|
|
3
|
+
export { Suggestion, Suggestions,
|
|
4
|
+
//
|
|
5
|
+
Suggestion as Item, Suggestions as Root };
|
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
function parseDuration(value) {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
if (!value) return 200;
|
|
3
|
+
const trimmed = value.trim();
|
|
4
|
+
if (trimmed.endsWith("ms")) return Number.parseFloat(trimmed);
|
|
5
|
+
if (trimmed.endsWith("s")) return Number.parseFloat(trimmed) * 1e3;
|
|
6
|
+
const parsed = Number.parseFloat(trimmed);
|
|
7
|
+
return Number.isFinite(parsed) ? parsed : 200;
|
|
8
8
|
}
|
|
9
9
|
function prefersReducedMotion() {
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
|
|
11
|
+
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
12
12
|
}
|
|
13
13
|
export function swapText(el, newText, opts) {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
14
|
+
if (prefersReducedMotion()) {
|
|
15
|
+
el.textContent = newText;
|
|
16
|
+
el.classList.remove("is-exit", "is-enter-start");
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
const durationMs = opts?.durationMs ?? parseDuration(getComputedStyle(el).getPropertyValue("--text-swap-dur"));
|
|
20
|
+
el.classList.add("t-text-swap", "is-exit");
|
|
21
|
+
window.setTimeout(() => {
|
|
22
|
+
el.textContent = newText;
|
|
23
|
+
el.classList.remove("is-exit");
|
|
24
|
+
el.classList.add("is-enter-start");
|
|
25
|
+
requestAnimationFrame(() => {
|
|
26
|
+
void el.offsetHeight;
|
|
27
|
+
el.classList.remove("is-enter-start");
|
|
28
|
+
});
|
|
29
|
+
}, durationMs);
|
|
30
30
|
}
|
package/dist/brand/index.js
CHANGED
|
@@ -1,65 +1,71 @@
|
|
|
1
1
|
const COLOR_VARS = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
2
|
+
brand: "--brand",
|
|
3
|
+
brandOnDark: "--brand-on-dark",
|
|
4
|
+
highlight: "--brand-highlight",
|
|
5
|
+
signal: "--brand-signal",
|
|
6
|
+
ink: "--brand-ink",
|
|
7
|
+
surface: "--brand-surface",
|
|
8
|
+
line: "--brand-line",
|
|
9
|
+
raised: "--brand-raised",
|
|
10
|
+
paper: "--brand-paper",
|
|
11
|
+
surfaceLight: "--brand-surface-light",
|
|
12
|
+
lineLight: "--brand-line-light",
|
|
13
|
+
primary: "--brand-primary",
|
|
14
|
+
primaryForeground: "--brand-primary-foreground",
|
|
15
|
+
primaryOnDark: "--brand-primary-on-dark",
|
|
16
|
+
primaryForegroundOnDark: "--brand-primary-foreground-on-dark"
|
|
17
17
|
};
|
|
18
18
|
const FONT_VARS = {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
sans: "--font-sans",
|
|
20
|
+
heading: "--font-heading",
|
|
21
|
+
mono: "--font-mono",
|
|
22
|
+
quote: "--font-quote"
|
|
23
23
|
};
|
|
24
|
+
/** The custom property each colour role sets. The tokens read these and nothing else. */
|
|
24
25
|
export const BRAND_COLOR_VARS = COLOR_VARS;
|
|
26
|
+
/** Keeps a typed brand typed at the call site. It returns the object unchanged. */
|
|
25
27
|
export function defineBrand(brand) {
|
|
26
|
-
|
|
28
|
+
return brand;
|
|
27
29
|
}
|
|
28
30
|
function checked(name, value) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
+
if (/[;{}<>]/.test(value)) throw new Error(`brand: ${name} holds a character CSS would read as more than a value`);
|
|
32
|
+
return value;
|
|
31
33
|
}
|
|
34
|
+
/** The custom properties a brand sets, by name. Roles the brand leaves out keep the neutral default. */
|
|
32
35
|
export function brandVars(brand) {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
36
|
+
const out = {};
|
|
37
|
+
for (const [key, name] of Object.entries(COLOR_VARS)) {
|
|
38
|
+
const value = brand.colors[key];
|
|
39
|
+
if (value !== undefined) out[name] = checked(name, value);
|
|
40
|
+
}
|
|
41
|
+
for (const [key, name] of Object.entries(FONT_VARS)) {
|
|
42
|
+
const value = brand.fonts?.[key];
|
|
43
|
+
if (value !== undefined) out[name] = checked(name, value);
|
|
44
|
+
}
|
|
45
|
+
for (const [name, value] of Object.entries(brand.vars ?? {})) out[name] = checked(name, value);
|
|
46
|
+
return out;
|
|
44
47
|
}
|
|
48
|
+
/** The brand as a `style` attribute value: put it on `<html>` in `app.html` or a layout. */
|
|
45
49
|
export function brandStyle(brand) {
|
|
46
|
-
|
|
50
|
+
return Object.entries(brandVars(brand)).map(([name, value]) => `${name}:${value}`).join(";");
|
|
47
51
|
}
|
|
52
|
+
/** The brand as a rule, for a stylesheet or a `<style>` in `<svelte:head>`. */
|
|
48
53
|
export function brandCss(brand, selector = ":root") {
|
|
49
|
-
|
|
50
|
-
|
|
54
|
+
const body = Object.entries(brandVars(brand)).map(([name, value]) => ` ${name}: ${value};`).join("\n");
|
|
55
|
+
return `${selector} {\n${body}\n}\n`;
|
|
51
56
|
}
|
|
57
|
+
/** Sets the brand on the page in the browser. Returns a function that puts the neutral look back. */
|
|
52
58
|
export function applyBrand(brand, root = document.documentElement) {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
59
|
+
const vars = brandVars(brand);
|
|
60
|
+
const before = new Map();
|
|
61
|
+
for (const [name, value] of Object.entries(vars)) {
|
|
62
|
+
before.set(name, root.style.getPropertyValue(name));
|
|
63
|
+
root.style.setProperty(name, value);
|
|
64
|
+
}
|
|
65
|
+
return () => {
|
|
66
|
+
for (const [name, value] of before) {
|
|
67
|
+
if (value) root.style.setProperty(name, value);
|
|
68
|
+
else root.style.removeProperty(name);
|
|
69
|
+
}
|
|
70
|
+
};
|
|
65
71
|
}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
export const DEFAULT_MIN_WIDTH = 120;
|
|
2
2
|
export const DEFAULT_MAX_WIDTH = 2400;
|
|
3
3
|
export const DEFAULT_MIN_HEIGHT = 40;
|
|
4
|
+
/** The saved floor height of a card, or 0 when its content sets the height. */
|
|
4
5
|
export function userHeightOf(data) {
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
const value = data?.userHeight;
|
|
7
|
+
return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : 0;
|
|
7
8
|
}
|
|
9
|
+
/** The height a finished drag keeps: the dragged one, never under what the content needs. */
|
|
8
10
|
export function keptHeight(dragged, content) {
|
|
9
|
-
|
|
11
|
+
return Math.max(Math.round(dragged), Math.ceil(content));
|
|
10
12
|
}
|