@morscherlab/mint-sdk 1.4.0-beta.14 → 1.4.0-beta.16
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/{AppSidebar-Bi8g9mRt.js → AppSidebar-CB0-RQ4m.js} +876 -114
- package/dist/AppSidebar-CB0-RQ4m.js.map +1 -0
- package/dist/{SettingsModal-jra_2u0o.js → SettingsModal-CoZK3EDN.js} +2 -2
- package/dist/{SettingsModal-jra_2u0o.js.map → SettingsModal-CoZK3EDN.js.map} +1 -1
- package/dist/__tests__/components/AppTopBarOnboarding.test.d.ts +1 -0
- package/dist/__tests__/composables/useOnboarding.test.d.ts +1 -0
- package/dist/components/AppTopBar.vue.d.ts +4 -4
- package/dist/components/internal/AppTopBarOnboardingInternal.vue.d.ts +7 -0
- package/dist/components/internal/OnboardingLayerInternal.vue.d.ts +7 -0
- package/dist/composables/useOnboarding.d.ts +119 -0
- package/dist/index.js +5 -5
- package/dist/{install-Bx_6KwJA.js → install-BKgb5qZw.js} +5 -5
- package/dist/{install-Bx_6KwJA.js.map → install-BKgb5qZw.js.map} +1 -1
- package/dist/install.js +1 -1
- package/dist/{runtime-BJvGms6h.js → runtime-Cz1GJa_O.js} +2 -2
- package/dist/{runtime-BJvGms6h.js.map → runtime-Cz1GJa_O.js.map} +1 -1
- package/dist/runtime.js +2 -2
- package/dist/{shell-Czyrzk7l.js → shell-kq9p4VsX.js} +7 -2
- package/dist/{shell-Czyrzk7l.js.map → shell-kq9p4VsX.js.map} +1 -1
- package/dist/shell.d.ts +1 -0
- package/dist/shell.js +3 -3
- package/dist/styles.css +369 -0
- package/package.json +1 -1
- package/src/__tests__/components/AppTopBarOnboarding.test.ts +160 -0
- package/src/__tests__/composables/useOnboarding.test.ts +317 -0
- package/src/components/AppTopBar.onboarding.story.vue +69 -0
- package/src/components/AppTopBar.vue +11 -2
- package/src/components/internal/AppTopBarOnboardingInternal.vue +172 -0
- package/src/components/internal/OnboardingLayerInternal.vue +173 -0
- package/src/composables/useOnboarding.ts +465 -0
- package/src/shell.ts +17 -0
- package/src/styles/components/onboarding.css +368 -0
- package/src/styles/index.css +1 -0
- package/dist/AppSidebar-Bi8g9mRt.js.map +0 -1
package/dist/runtime.js
CHANGED
|
@@ -2,7 +2,7 @@ import { i as AuthenticationRequiredError, o as useApi } from "./experiment-DyO5
|
|
|
2
2
|
import { c as isTerminalJobStatus, d as normalizeJobState, f as resolveJobCapabilities, l as jobStatusLabel, o as resolveCurrentPluginId, s as isActiveJobStatus, u as normalizeJobPercent } from "./records-B4yl2oIu.js";
|
|
3
3
|
import { A as createGeneratedAnalysisTransport, D as GeneratedPathInput_default, _ as getFieldRegistryEntry, j as useJobsEndpoint, v as getTypeDefault } from "./useListReorder-C_8RYeVP.js";
|
|
4
4
|
import { a as GeneratedPlotlyResult_default, c as downloadEndpoint, d as useEventStream, f as useSettingsEndpoint, i as GeneratedResultRenderer_default, l as pluginFormDataFromPayload, m as resolvePluginBaseUrl, o as createClient, p as buildEndpointUrl, u as uploadEndpoint } from "./useRackEditor-BhYlXKFM.js";
|
|
5
|
-
import { a as ComponentBindingRenderer_default, c as generatedJobFormSchema, f as useControlWorkspace, i as RuntimeUpdateNotice_default, l as normalizeGeneratedJobInput, n as PresenceAvatars_default, o as GeneratedPluginView_default, r as usePresence, s as generatedJobDefaults } from "./runtime-
|
|
6
|
-
import {
|
|
5
|
+
import { a as ComponentBindingRenderer_default, c as generatedJobFormSchema, f as useControlWorkspace, i as RuntimeUpdateNotice_default, l as normalizeGeneratedJobInput, n as PresenceAvatars_default, o as GeneratedPluginView_default, r as usePresence, s as generatedJobDefaults } from "./runtime-Cz1GJa_O.js";
|
|
6
|
+
import { D as useControlSchema, E as getControlDefaults, F as getDefaultControlView, M as controlsTo, O as controlBindings, T as defineControls, d as useForm, l as useFormBuilder, u as evaluateCondition, w as defineControlComponentBindings } from "./AppSidebar-CB0-RQ4m.js";
|
|
7
7
|
import { a as combinePluginJobSources, o as useJobCenter, r as useRealtime } from "./useRealtime-CUMbW_ln.js";
|
|
8
8
|
export { AuthenticationRequiredError, ComponentBindingRenderer_default as ComponentBindingRenderer, GeneratedPathInput_default as GeneratedPathInput, GeneratedPlotlyResult_default as GeneratedPlotlyResult, GeneratedPluginView_default as GeneratedPluginView, GeneratedResultRenderer_default as GeneratedResultRenderer, PresenceAvatars_default as PresenceAvatars, RuntimeUpdateNotice_default as RuntimeUpdateNotice, buildEndpointUrl, combinePluginJobSources, controlBindings, controlsTo, createClient, createGeneratedAnalysisTransport, defineControlComponentBindings, defineControls, downloadEndpoint, evaluateCondition, generatedJobDefaults, generatedJobFormSchema, getControlDefaults, getDefaultControlView, getFieldRegistryEntry, getTypeDefault, isActiveJobStatus, isTerminalJobStatus, jobStatusLabel, normalizeGeneratedJobInput, normalizeJobPercent, normalizeJobState, pluginFormDataFromPayload, resolveCurrentPluginId, resolveJobCapabilities, resolvePluginBaseUrl, uploadEndpoint, useApi, useControlSchema, useControlWorkspace, useEventStream, useForm, useFormBuilder, useJobCenter, useJobsEndpoint, usePresence, useRealtime, useSettingsEndpoint };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { i as useEventListener, o as __exportAll, r as useFocusTrap } from "./useDropdownState-Bb2N4m40.js";
|
|
2
2
|
import { E as useMenuKeyboard, H as useListSelection, R as useRovingFocus, U as useSelectionLimit } from "./records-B4yl2oIu.js";
|
|
3
3
|
import { B as compareSortValues, V as useSortedItems, i as useReorderAnnouncer, n as reorderList, r as useListReorder, t as REORDER_ANNOUNCER_STYLE } from "./useListReorder-C_8RYeVP.js";
|
|
4
|
-
import {
|
|
4
|
+
import { C as usePluginWorkspace, S as AppLayout_default, _ as provideOnboarding, f as AppTopBar_default, g as defineOnboarding, h as ONBOARDING_KEY, m as ANCHOR_WAIT_MS, t as AppSidebar_default, v as useOnboarding } from "./AppSidebar-CB0-RQ4m.js";
|
|
5
5
|
import { t as useDebouncedWatch } from "./useDebouncedWatch-BPwyl6eS.js";
|
|
6
6
|
import { t as useExpansionSet } from "./useExpansionSet-CvoNMZJi.js";
|
|
7
7
|
import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, onBeforeUnmount, openBlock, shallowRef, toValue, watch } from "vue";
|
|
@@ -167,12 +167,16 @@ function useManualLayoutResize(options) {
|
|
|
167
167
|
//#endregion
|
|
168
168
|
//#region src/shell.ts
|
|
169
169
|
var shell_exports = /* @__PURE__ */ __exportAll({
|
|
170
|
+
ANCHOR_WAIT_MS: () => ANCHOR_WAIT_MS,
|
|
170
171
|
AppLayout: () => AppLayout_default,
|
|
171
172
|
AppSidebar: () => AppSidebar_default,
|
|
172
173
|
AppTopBar: () => AppTopBar_default,
|
|
173
174
|
LayoutResizeHandle: () => LayoutResizeHandle_default,
|
|
175
|
+
ONBOARDING_KEY: () => ONBOARDING_KEY,
|
|
174
176
|
REORDER_ANNOUNCER_STYLE: () => REORDER_ANNOUNCER_STYLE,
|
|
175
177
|
compareSortValues: () => compareSortValues,
|
|
178
|
+
defineOnboarding: () => defineOnboarding,
|
|
179
|
+
provideOnboarding: () => provideOnboarding,
|
|
176
180
|
reorderList: () => reorderList,
|
|
177
181
|
resizedLeadingPanelWidth: () => resizedLeadingPanelWidth,
|
|
178
182
|
resizedTrailingPanelWidth: () => resizedTrailingPanelWidth,
|
|
@@ -185,6 +189,7 @@ var shell_exports = /* @__PURE__ */ __exportAll({
|
|
|
185
189
|
useListSelection: () => useListSelection,
|
|
186
190
|
useManualLayoutResize: () => useManualLayoutResize,
|
|
187
191
|
useMenuKeyboard: () => useMenuKeyboard,
|
|
192
|
+
useOnboarding: () => useOnboarding,
|
|
188
193
|
usePluginWorkspace: () => usePluginWorkspace,
|
|
189
194
|
useReorderAnnouncer: () => useReorderAnnouncer,
|
|
190
195
|
useRovingFocus: () => useRovingFocus,
|
|
@@ -194,4 +199,4 @@ var shell_exports = /* @__PURE__ */ __exportAll({
|
|
|
194
199
|
//#endregion
|
|
195
200
|
export { useManualLayoutResize as a, resizedVerticalSplitPercent as i, resizedLeadingPanelWidth as n, LayoutResizeHandle_default as o, resizedTrailingPanelWidth as r, shell_exports as t };
|
|
196
201
|
|
|
197
|
-
//# sourceMappingURL=shell-
|
|
202
|
+
//# sourceMappingURL=shell-kq9p4VsX.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell-Czyrzk7l.js","names":[],"sources":["../src/components/LayoutResizeHandle.vue","../src/components/LayoutResizeHandle.vue","../src/composables/useManualLayoutResize.ts","../src/shell.ts"],"sourcesContent":["<script setup lang=\"ts\">\n/** Accessible pointer and keyboard handle for resizable workbench panes. */\ninterface Props {\n modelValue: number\n min: number\n max: number\n label: string\n orientation: 'vertical' | 'horizontal'\n edge?: 'left' | 'right'\n step?: number\n disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n edge: undefined,\n step: 10,\n disabled: false,\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: number]\n 'resize-start': [event: PointerEvent]\n}>()\n\nfunction update(value: number): void {\n emit('update:modelValue', Math.min(props.max, Math.max(props.min, value)))\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n if (props.disabled) return\n const decrement = props.orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp'\n const increment = props.orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown'\n if (event.key === decrement) update(props.modelValue - props.step)\n else if (event.key === increment) update(props.modelValue + props.step)\n else if (event.key === 'Home') update(props.min)\n else if (event.key === 'End') update(props.max)\n else return\n event.preventDefault()\n}\n</script>\n\n<template>\n <div\n role=\"separator\"\n :tabindex=\"disabled ? -1 : 0\"\n :class=\"[\n 'mint-layout-resize-handle',\n `mint-layout-resize-handle--${orientation}`,\n edge ? `mint-layout-resize-handle--edge-${edge}` : '',\n ]\"\n :aria-label=\"label\"\n :aria-orientation=\"orientation\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n :aria-valuenow=\"modelValue\"\n :aria-disabled=\"disabled || undefined\"\n @pointerdown=\"!disabled && emit('resize-start', $event)\"\n @keydown=\"handleKeydown\"\n >\n <span class=\"mint-layout-resize-handle__bar\" aria-hidden=\"true\" />\n </div>\n</template>\n","<script setup lang=\"ts\">\n/** Accessible pointer and keyboard handle for resizable workbench panes. */\ninterface Props {\n modelValue: number\n min: number\n max: number\n label: string\n orientation: 'vertical' | 'horizontal'\n edge?: 'left' | 'right'\n step?: number\n disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n edge: undefined,\n step: 10,\n disabled: false,\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: number]\n 'resize-start': [event: PointerEvent]\n}>()\n\nfunction update(value: number): void {\n emit('update:modelValue', Math.min(props.max, Math.max(props.min, value)))\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n if (props.disabled) return\n const decrement = props.orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp'\n const increment = props.orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown'\n if (event.key === decrement) update(props.modelValue - props.step)\n else if (event.key === increment) update(props.modelValue + props.step)\n else if (event.key === 'Home') update(props.min)\n else if (event.key === 'End') update(props.max)\n else return\n event.preventDefault()\n}\n</script>\n\n<template>\n <div\n role=\"separator\"\n :tabindex=\"disabled ? -1 : 0\"\n :class=\"[\n 'mint-layout-resize-handle',\n `mint-layout-resize-handle--${orientation}`,\n edge ? `mint-layout-resize-handle--edge-${edge}` : '',\n ]\"\n :aria-label=\"label\"\n :aria-orientation=\"orientation\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n :aria-valuenow=\"modelValue\"\n :aria-disabled=\"disabled || undefined\"\n @pointerdown=\"!disabled && emit('resize-start', $event)\"\n @keydown=\"handleKeydown\"\n >\n <span class=\"mint-layout-resize-handle__bar\" aria-hidden=\"true\" />\n </div>\n</template>\n","import { computed, onBeforeUnmount, shallowRef, toValue, watch, type MaybeRefOrGetter } from 'vue'\n\nexport interface ResizePanelWidthConstraints {\n minWidth: number\n maxWidth: number\n mainMinWidth?: number\n layoutGap?: number\n}\n\nexport interface ResizePercentConstraints {\n minPercent: number\n maxPercent: number\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n return Math.min(max, Math.max(min, value))\n}\n\nfunction availablePanelWidth(\n containerWidth: number,\n constraints: ResizePanelWidthConstraints,\n): number {\n return Math.min(\n constraints.maxWidth,\n containerWidth - (constraints.mainMinWidth ?? 0) - (constraints.layoutGap ?? 0),\n )\n}\n\nexport function resizedLeadingPanelWidth(\n startWidth: number,\n deltaX: number,\n containerWidth: number,\n constraints: ResizePanelWidthConstraints,\n): number {\n return Math.round(clamp(\n startWidth + deltaX,\n constraints.minWidth,\n Math.max(constraints.minWidth, availablePanelWidth(containerWidth, constraints)),\n ))\n}\n\nexport function resizedTrailingPanelWidth(\n startWidth: number,\n deltaX: number,\n containerWidth: number,\n constraints: ResizePanelWidthConstraints,\n): number {\n return resizedLeadingPanelWidth(startWidth, -deltaX, containerWidth, constraints)\n}\n\nexport function resizedVerticalSplitPercent(\n startPercent: number,\n deltaY: number,\n containerHeight: number,\n constraints: ResizePercentConstraints,\n): number {\n if (containerHeight <= 0) return startPercent\n return Math.round(clamp(\n startPercent + (deltaY / containerHeight) * 100,\n constraints.minPercent,\n constraints.maxPercent,\n ))\n}\n\nexport interface ManualLayoutResizeContext<TKind extends string> {\n kind: TKind\n startValue: number\n deltaX: number\n deltaY: number\n containerRect: DOMRectReadOnly\n secondaryRect: DOMRectReadOnly | null\n}\n\nexport interface ManualLayoutResizeTarget<TKind extends string> {\n cursor?: string\n getContainerElement: () => HTMLElement | null\n getSecondaryElement?: () => HTMLElement | null\n getStartValue: () => number\n onResize: (context: ManualLayoutResizeContext<TKind>) => void\n}\n\n/** Coordinates pointer-driven resizing for one or more layout splitters. */\nexport function useManualLayoutResize<TKind extends string>(options: {\n enabled: MaybeRefOrGetter<boolean>\n resolveTarget: (kind: TKind) => ManualLayoutResizeTarget<TKind> | null\n}) {\n const activeResize = shallowRef<{\n kind: TKind\n startClientX: number\n startClientY: number\n startValue: number\n containerRect: DOMRectReadOnly\n secondaryRect: DOMRectReadOnly | null\n cursor: string\n } | null>(null)\n const isResizing = computed(() => activeResize.value !== null)\n let previousBodyCursor = ''\n let previousBodyUserSelect = ''\n\n function stopResize(): void {\n if (!activeResize.value) return\n activeResize.value = null\n window.removeEventListener('pointermove', handlePointerMove)\n window.removeEventListener('pointerup', stopResize)\n window.removeEventListener('pointercancel', stopResize)\n if (typeof document !== 'undefined') {\n document.body.style.cursor = previousBodyCursor\n document.body.style.userSelect = previousBodyUserSelect\n }\n }\n\n function handlePointerMove(event: PointerEvent): void {\n const state = activeResize.value\n if (!state) return\n options.resolveTarget(state.kind)?.onResize({\n kind: state.kind,\n startValue: state.startValue,\n deltaX: event.clientX - state.startClientX,\n deltaY: event.clientY - state.startClientY,\n containerRect: state.containerRect,\n secondaryRect: state.secondaryRect,\n })\n }\n\n function startResize(kind: TKind, event: PointerEvent): void {\n if (!toValue(options.enabled) || event.button !== 0) return\n const target = options.resolveTarget(kind)\n const containerRect = target?.getContainerElement()?.getBoundingClientRect()\n if (!target || !containerRect) return\n\n event.preventDefault()\n if (event.currentTarget instanceof HTMLElement) {\n event.currentTarget.setPointerCapture(event.pointerId)\n }\n const secondary = target.getSecondaryElement?.() ?? null\n activeResize.value = {\n kind,\n startClientX: event.clientX,\n startClientY: event.clientY,\n startValue: target.getStartValue(),\n containerRect,\n secondaryRect: secondary?.getBoundingClientRect() ?? null,\n cursor: target.cursor ?? 'col-resize',\n }\n\n if (typeof document !== 'undefined') {\n previousBodyCursor = document.body.style.cursor\n previousBodyUserSelect = document.body.style.userSelect\n document.body.style.cursor = activeResize.value.cursor\n document.body.style.userSelect = 'none'\n }\n window.addEventListener('pointermove', handlePointerMove)\n window.addEventListener('pointerup', stopResize)\n window.addEventListener('pointercancel', stopResize)\n }\n\n function isResizingKind(kind: TKind): boolean {\n return activeResize.value?.kind === kind\n }\n\n watch(() => toValue(options.enabled), enabled => { if (!enabled) stopResize() })\n onBeforeUnmount(stopResize)\n\n return { activeResize, isResizing, isResizingKind, startResize, stopResize }\n}\n","// Application shell components (`@morscherlab/mint-sdk/shell`).\n\n// Layout components\nexport { default as AppTopBar } from './components/AppTopBar.vue'\nexport { default as AppSidebar } from './components/AppSidebar.vue'\nexport { default as AppLayout } from './components/AppLayout.vue'\nexport { default as LayoutResizeHandle } from './components/LayoutResizeHandle.vue'\n\n// Headless interaction composables\nexport {\n useEventListener,\n type EventListenerEnabled,\n type EventFor,\n type EventListenerStop,\n type EventMapFor,\n type EventTargetGetter,\n type EventTargetLike,\n type UseEventListenerObjectOptions,\n type UseEventListenerOptions,\n} from './composables/useEventListener'\nexport {\n useDebouncedWatch,\n type DebouncedWatchCallback,\n type DebouncedWatchCleanup,\n type DebouncedWatchSource,\n type UseDebouncedWatchOptions,\n type UseDebouncedWatchReturn,\n} from './composables/useDebouncedWatch'\nexport {\n useFocusTrap,\n type UseFocusTrapOptions,\n type UseFocusTrapReturn,\n} from './composables/useFocusTrap'\nexport {\n useRovingFocus,\n type UseRovingFocusOptions,\n type UseRovingFocusReturn,\n} from './composables/useRovingFocus'\nexport {\n reorderList,\n useListReorder,\n useReorderAnnouncer,\n REORDER_ANNOUNCER_STYLE,\n type ListReorderMove,\n type UseListReorderOptions,\n type UseListReorderReturn,\n type UseReorderAnnouncerReturn,\n} from './composables/useListReorder'\nexport {\n useMenuKeyboard,\n type UseMenuKeyboardOptions,\n type UseMenuKeyboardReturn,\n} from './composables/useMenuKeyboard'\n\n// Layout, selection, expansion and sort primitives\nexport {\n resizedLeadingPanelWidth,\n resizedTrailingPanelWidth,\n resizedVerticalSplitPercent,\n useManualLayoutResize,\n type ManualLayoutResizeContext,\n type ManualLayoutResizeTarget,\n type ResizePanelWidthConstraints,\n type ResizePercentConstraints,\n} from './composables/useManualLayoutResize'\nexport {\n useSelectionLimit,\n type SelectionLimitSource,\n type UseSelectionLimitOptions,\n type UseSelectionLimitReturn,\n} from './composables/useSelectionLimit'\nexport {\n useListSelection,\n type ListSelectionSource,\n type ListSelectionValue,\n type UseListSelectionOptions,\n type UseListSelectionReturn,\n type WidenListSelectionValue,\n} from './composables/useListSelection'\nexport {\n useExpansionSet,\n type ExpansionSetSource,\n type UseExpansionSetOptions,\n type UseExpansionSetReturn,\n} from './composables/useExpansionSet'\nexport {\n compareSortValues,\n useSortedItems,\n type CompareSortValuesOptions,\n type SortComparator,\n type SortComparatorContext,\n type SortDescriptor,\n type SortedItemsSource,\n type SortOrder,\n type UseSortedItemsOptions,\n type UseSortedItemsReturn,\n} from './composables/useSortedItems'\nexport {\n usePluginWorkspace,\n type PluginWorkspaceSlotsLike,\n type UsePluginWorkspaceOptions,\n type UsePluginWorkspaceReturn,\n} from './composables/usePluginWorkspace'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"shell-kq9p4VsX.js","names":[],"sources":["../src/components/LayoutResizeHandle.vue","../src/components/LayoutResizeHandle.vue","../src/composables/useManualLayoutResize.ts","../src/shell.ts"],"sourcesContent":["<script setup lang=\"ts\">\n/** Accessible pointer and keyboard handle for resizable workbench panes. */\ninterface Props {\n modelValue: number\n min: number\n max: number\n label: string\n orientation: 'vertical' | 'horizontal'\n edge?: 'left' | 'right'\n step?: number\n disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n edge: undefined,\n step: 10,\n disabled: false,\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: number]\n 'resize-start': [event: PointerEvent]\n}>()\n\nfunction update(value: number): void {\n emit('update:modelValue', Math.min(props.max, Math.max(props.min, value)))\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n if (props.disabled) return\n const decrement = props.orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp'\n const increment = props.orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown'\n if (event.key === decrement) update(props.modelValue - props.step)\n else if (event.key === increment) update(props.modelValue + props.step)\n else if (event.key === 'Home') update(props.min)\n else if (event.key === 'End') update(props.max)\n else return\n event.preventDefault()\n}\n</script>\n\n<template>\n <div\n role=\"separator\"\n :tabindex=\"disabled ? -1 : 0\"\n :class=\"[\n 'mint-layout-resize-handle',\n `mint-layout-resize-handle--${orientation}`,\n edge ? `mint-layout-resize-handle--edge-${edge}` : '',\n ]\"\n :aria-label=\"label\"\n :aria-orientation=\"orientation\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n :aria-valuenow=\"modelValue\"\n :aria-disabled=\"disabled || undefined\"\n @pointerdown=\"!disabled && emit('resize-start', $event)\"\n @keydown=\"handleKeydown\"\n >\n <span class=\"mint-layout-resize-handle__bar\" aria-hidden=\"true\" />\n </div>\n</template>\n","<script setup lang=\"ts\">\n/** Accessible pointer and keyboard handle for resizable workbench panes. */\ninterface Props {\n modelValue: number\n min: number\n max: number\n label: string\n orientation: 'vertical' | 'horizontal'\n edge?: 'left' | 'right'\n step?: number\n disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n edge: undefined,\n step: 10,\n disabled: false,\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: number]\n 'resize-start': [event: PointerEvent]\n}>()\n\nfunction update(value: number): void {\n emit('update:modelValue', Math.min(props.max, Math.max(props.min, value)))\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n if (props.disabled) return\n const decrement = props.orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp'\n const increment = props.orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown'\n if (event.key === decrement) update(props.modelValue - props.step)\n else if (event.key === increment) update(props.modelValue + props.step)\n else if (event.key === 'Home') update(props.min)\n else if (event.key === 'End') update(props.max)\n else return\n event.preventDefault()\n}\n</script>\n\n<template>\n <div\n role=\"separator\"\n :tabindex=\"disabled ? -1 : 0\"\n :class=\"[\n 'mint-layout-resize-handle',\n `mint-layout-resize-handle--${orientation}`,\n edge ? `mint-layout-resize-handle--edge-${edge}` : '',\n ]\"\n :aria-label=\"label\"\n :aria-orientation=\"orientation\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n :aria-valuenow=\"modelValue\"\n :aria-disabled=\"disabled || undefined\"\n @pointerdown=\"!disabled && emit('resize-start', $event)\"\n @keydown=\"handleKeydown\"\n >\n <span class=\"mint-layout-resize-handle__bar\" aria-hidden=\"true\" />\n </div>\n</template>\n","import { computed, onBeforeUnmount, shallowRef, toValue, watch, type MaybeRefOrGetter } from 'vue'\n\nexport interface ResizePanelWidthConstraints {\n minWidth: number\n maxWidth: number\n mainMinWidth?: number\n layoutGap?: number\n}\n\nexport interface ResizePercentConstraints {\n minPercent: number\n maxPercent: number\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n return Math.min(max, Math.max(min, value))\n}\n\nfunction availablePanelWidth(\n containerWidth: number,\n constraints: ResizePanelWidthConstraints,\n): number {\n return Math.min(\n constraints.maxWidth,\n containerWidth - (constraints.mainMinWidth ?? 0) - (constraints.layoutGap ?? 0),\n )\n}\n\nexport function resizedLeadingPanelWidth(\n startWidth: number,\n deltaX: number,\n containerWidth: number,\n constraints: ResizePanelWidthConstraints,\n): number {\n return Math.round(clamp(\n startWidth + deltaX,\n constraints.minWidth,\n Math.max(constraints.minWidth, availablePanelWidth(containerWidth, constraints)),\n ))\n}\n\nexport function resizedTrailingPanelWidth(\n startWidth: number,\n deltaX: number,\n containerWidth: number,\n constraints: ResizePanelWidthConstraints,\n): number {\n return resizedLeadingPanelWidth(startWidth, -deltaX, containerWidth, constraints)\n}\n\nexport function resizedVerticalSplitPercent(\n startPercent: number,\n deltaY: number,\n containerHeight: number,\n constraints: ResizePercentConstraints,\n): number {\n if (containerHeight <= 0) return startPercent\n return Math.round(clamp(\n startPercent + (deltaY / containerHeight) * 100,\n constraints.minPercent,\n constraints.maxPercent,\n ))\n}\n\nexport interface ManualLayoutResizeContext<TKind extends string> {\n kind: TKind\n startValue: number\n deltaX: number\n deltaY: number\n containerRect: DOMRectReadOnly\n secondaryRect: DOMRectReadOnly | null\n}\n\nexport interface ManualLayoutResizeTarget<TKind extends string> {\n cursor?: string\n getContainerElement: () => HTMLElement | null\n getSecondaryElement?: () => HTMLElement | null\n getStartValue: () => number\n onResize: (context: ManualLayoutResizeContext<TKind>) => void\n}\n\n/** Coordinates pointer-driven resizing for one or more layout splitters. */\nexport function useManualLayoutResize<TKind extends string>(options: {\n enabled: MaybeRefOrGetter<boolean>\n resolveTarget: (kind: TKind) => ManualLayoutResizeTarget<TKind> | null\n}) {\n const activeResize = shallowRef<{\n kind: TKind\n startClientX: number\n startClientY: number\n startValue: number\n containerRect: DOMRectReadOnly\n secondaryRect: DOMRectReadOnly | null\n cursor: string\n } | null>(null)\n const isResizing = computed(() => activeResize.value !== null)\n let previousBodyCursor = ''\n let previousBodyUserSelect = ''\n\n function stopResize(): void {\n if (!activeResize.value) return\n activeResize.value = null\n window.removeEventListener('pointermove', handlePointerMove)\n window.removeEventListener('pointerup', stopResize)\n window.removeEventListener('pointercancel', stopResize)\n if (typeof document !== 'undefined') {\n document.body.style.cursor = previousBodyCursor\n document.body.style.userSelect = previousBodyUserSelect\n }\n }\n\n function handlePointerMove(event: PointerEvent): void {\n const state = activeResize.value\n if (!state) return\n options.resolveTarget(state.kind)?.onResize({\n kind: state.kind,\n startValue: state.startValue,\n deltaX: event.clientX - state.startClientX,\n deltaY: event.clientY - state.startClientY,\n containerRect: state.containerRect,\n secondaryRect: state.secondaryRect,\n })\n }\n\n function startResize(kind: TKind, event: PointerEvent): void {\n if (!toValue(options.enabled) || event.button !== 0) return\n const target = options.resolveTarget(kind)\n const containerRect = target?.getContainerElement()?.getBoundingClientRect()\n if (!target || !containerRect) return\n\n event.preventDefault()\n if (event.currentTarget instanceof HTMLElement) {\n event.currentTarget.setPointerCapture(event.pointerId)\n }\n const secondary = target.getSecondaryElement?.() ?? null\n activeResize.value = {\n kind,\n startClientX: event.clientX,\n startClientY: event.clientY,\n startValue: target.getStartValue(),\n containerRect,\n secondaryRect: secondary?.getBoundingClientRect() ?? null,\n cursor: target.cursor ?? 'col-resize',\n }\n\n if (typeof document !== 'undefined') {\n previousBodyCursor = document.body.style.cursor\n previousBodyUserSelect = document.body.style.userSelect\n document.body.style.cursor = activeResize.value.cursor\n document.body.style.userSelect = 'none'\n }\n window.addEventListener('pointermove', handlePointerMove)\n window.addEventListener('pointerup', stopResize)\n window.addEventListener('pointercancel', stopResize)\n }\n\n function isResizingKind(kind: TKind): boolean {\n return activeResize.value?.kind === kind\n }\n\n watch(() => toValue(options.enabled), enabled => { if (!enabled) stopResize() })\n onBeforeUnmount(stopResize)\n\n return { activeResize, isResizing, isResizingKind, startResize, stopResize }\n}\n","// Application shell components (`@morscherlab/mint-sdk/shell`).\n\n// Layout components\nexport { default as AppTopBar } from './components/AppTopBar.vue'\nexport { default as AppSidebar } from './components/AppSidebar.vue'\nexport { default as AppLayout } from './components/AppLayout.vue'\nexport { default as LayoutResizeHandle } from './components/LayoutResizeHandle.vue'\n\n// Headless interaction composables\nexport {\n useEventListener,\n type EventListenerEnabled,\n type EventFor,\n type EventListenerStop,\n type EventMapFor,\n type EventTargetGetter,\n type EventTargetLike,\n type UseEventListenerObjectOptions,\n type UseEventListenerOptions,\n} from './composables/useEventListener'\nexport {\n useDebouncedWatch,\n type DebouncedWatchCallback,\n type DebouncedWatchCleanup,\n type DebouncedWatchSource,\n type UseDebouncedWatchOptions,\n type UseDebouncedWatchReturn,\n} from './composables/useDebouncedWatch'\nexport {\n useFocusTrap,\n type UseFocusTrapOptions,\n type UseFocusTrapReturn,\n} from './composables/useFocusTrap'\nexport {\n useRovingFocus,\n type UseRovingFocusOptions,\n type UseRovingFocusReturn,\n} from './composables/useRovingFocus'\nexport {\n reorderList,\n useListReorder,\n useReorderAnnouncer,\n REORDER_ANNOUNCER_STYLE,\n type ListReorderMove,\n type UseListReorderOptions,\n type UseListReorderReturn,\n type UseReorderAnnouncerReturn,\n} from './composables/useListReorder'\nexport {\n useMenuKeyboard,\n type UseMenuKeyboardOptions,\n type UseMenuKeyboardReturn,\n} from './composables/useMenuKeyboard'\n\n// Layout, selection, expansion and sort primitives\nexport {\n resizedLeadingPanelWidth,\n resizedTrailingPanelWidth,\n resizedVerticalSplitPercent,\n useManualLayoutResize,\n type ManualLayoutResizeContext,\n type ManualLayoutResizeTarget,\n type ResizePanelWidthConstraints,\n type ResizePercentConstraints,\n} from './composables/useManualLayoutResize'\nexport {\n useSelectionLimit,\n type SelectionLimitSource,\n type UseSelectionLimitOptions,\n type UseSelectionLimitReturn,\n} from './composables/useSelectionLimit'\nexport {\n useListSelection,\n type ListSelectionSource,\n type ListSelectionValue,\n type UseListSelectionOptions,\n type UseListSelectionReturn,\n type WidenListSelectionValue,\n} from './composables/useListSelection'\nexport {\n useExpansionSet,\n type ExpansionSetSource,\n type UseExpansionSetOptions,\n type UseExpansionSetReturn,\n} from './composables/useExpansionSet'\nexport {\n compareSortValues,\n useSortedItems,\n type CompareSortValuesOptions,\n type SortComparator,\n type SortComparatorContext,\n type SortDescriptor,\n type SortedItemsSource,\n type SortOrder,\n type UseSortedItemsOptions,\n type UseSortedItemsReturn,\n} from './composables/useSortedItems'\nexport {\n usePluginWorkspace,\n type PluginWorkspaceSlotsLike,\n type UsePluginWorkspaceOptions,\n type UsePluginWorkspaceReturn,\n} from './composables/usePluginWorkspace'\n\n// Onboarding: tours, the Getting started checklist and what's-new hints\nexport {\n ANCHOR_WAIT_MS,\n defineOnboarding,\n provideOnboarding,\n useOnboarding,\n ONBOARDING_KEY,\n type OnboardingActiveStep,\n type OnboardingDefinition,\n type OnboardingNews,\n type OnboardingState,\n type OnboardingStep,\n type OnboardingTask,\n type OnboardingTour,\n type ProvideOnboardingOptions,\n} from './composables/useOnboarding'\n"],"mappings":"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"}
|
package/dist/shell.d.ts
CHANGED
|
@@ -14,3 +14,4 @@ export { useListSelection, type ListSelectionSource, type ListSelectionValue, ty
|
|
|
14
14
|
export { useExpansionSet, type ExpansionSetSource, type UseExpansionSetOptions, type UseExpansionSetReturn, } from './composables/useExpansionSet';
|
|
15
15
|
export { compareSortValues, useSortedItems, type CompareSortValuesOptions, type SortComparator, type SortComparatorContext, type SortDescriptor, type SortedItemsSource, type SortOrder, type UseSortedItemsOptions, type UseSortedItemsReturn, } from './composables/useSortedItems';
|
|
16
16
|
export { usePluginWorkspace, type PluginWorkspaceSlotsLike, type UsePluginWorkspaceOptions, type UsePluginWorkspaceReturn, } from './composables/usePluginWorkspace';
|
|
17
|
+
export { ANCHOR_WAIT_MS, defineOnboarding, provideOnboarding, useOnboarding, ONBOARDING_KEY, type OnboardingActiveStep, type OnboardingDefinition, type OnboardingNews, type OnboardingState, type OnboardingStep, type OnboardingTask, type OnboardingTour, type ProvideOnboardingOptions, } from './composables/useOnboarding';
|
package/dist/shell.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { i as useEventListener, r as useFocusTrap } from "./useDropdownState-Bb2N4m40.js";
|
|
2
2
|
import { E as useMenuKeyboard, H as useListSelection, R as useRovingFocus, U as useSelectionLimit } from "./records-B4yl2oIu.js";
|
|
3
3
|
import { B as compareSortValues, V as useSortedItems, i as useReorderAnnouncer, n as reorderList, r as useListReorder, t as REORDER_ANNOUNCER_STYLE } from "./useListReorder-C_8RYeVP.js";
|
|
4
|
-
import {
|
|
4
|
+
import { C as usePluginWorkspace, S as AppLayout_default, _ as provideOnboarding, f as AppTopBar_default, g as defineOnboarding, h as ONBOARDING_KEY, m as ANCHOR_WAIT_MS, t as AppSidebar_default, v as useOnboarding } from "./AppSidebar-CB0-RQ4m.js";
|
|
5
5
|
import { t as useDebouncedWatch } from "./useDebouncedWatch-BPwyl6eS.js";
|
|
6
6
|
import { t as useExpansionSet } from "./useExpansionSet-CvoNMZJi.js";
|
|
7
|
-
import { a as useManualLayoutResize, i as resizedVerticalSplitPercent, n as resizedLeadingPanelWidth, o as LayoutResizeHandle_default, r as resizedTrailingPanelWidth } from "./shell-
|
|
8
|
-
export { AppLayout_default as AppLayout, AppSidebar_default as AppSidebar, AppTopBar_default as AppTopBar, LayoutResizeHandle_default as LayoutResizeHandle, REORDER_ANNOUNCER_STYLE, compareSortValues, reorderList, resizedLeadingPanelWidth, resizedTrailingPanelWidth, resizedVerticalSplitPercent, useDebouncedWatch, useEventListener, useExpansionSet, useFocusTrap, useListReorder, useListSelection, useManualLayoutResize, useMenuKeyboard, usePluginWorkspace, useReorderAnnouncer, useRovingFocus, useSelectionLimit, useSortedItems };
|
|
7
|
+
import { a as useManualLayoutResize, i as resizedVerticalSplitPercent, n as resizedLeadingPanelWidth, o as LayoutResizeHandle_default, r as resizedTrailingPanelWidth } from "./shell-kq9p4VsX.js";
|
|
8
|
+
export { ANCHOR_WAIT_MS, AppLayout_default as AppLayout, AppSidebar_default as AppSidebar, AppTopBar_default as AppTopBar, LayoutResizeHandle_default as LayoutResizeHandle, ONBOARDING_KEY, REORDER_ANNOUNCER_STYLE, compareSortValues, defineOnboarding, provideOnboarding, reorderList, resizedLeadingPanelWidth, resizedTrailingPanelWidth, resizedVerticalSplitPercent, useDebouncedWatch, useEventListener, useExpansionSet, useFocusTrap, useListReorder, useListSelection, useManualLayoutResize, useMenuKeyboard, useOnboarding, usePluginWorkspace, useReorderAnnouncer, useRovingFocus, useSelectionLimit, useSortedItems };
|
package/dist/styles.css
CHANGED
|
@@ -5823,6 +5823,375 @@ button, input, select, textarea {
|
|
|
5823
5823
|
}
|
|
5824
5824
|
}
|
|
5825
5825
|
|
|
5826
|
+
/* Onboarding: the top-bar Help button and checklist chip, the Help panel,
|
|
5827
|
+
* the tour layer (scrim, hole, card) and the what's-new dots. */
|
|
5828
|
+
|
|
5829
|
+
:root {
|
|
5830
|
+
--mint-onboarding-scrim: rgba(15, 23, 42, 0.45);
|
|
5831
|
+
}
|
|
5832
|
+
|
|
5833
|
+
html.dark {
|
|
5834
|
+
--mint-onboarding-scrim: rgba(2, 6, 23, 0.62);
|
|
5835
|
+
}
|
|
5836
|
+
|
|
5837
|
+
/* ---- Top bar ---- */
|
|
5838
|
+
|
|
5839
|
+
.mint-onboarding-help {
|
|
5840
|
+
position: relative;
|
|
5841
|
+
display: inline-flex;
|
|
5842
|
+
align-items: center;
|
|
5843
|
+
gap: 0.375rem;
|
|
5844
|
+
}
|
|
5845
|
+
|
|
5846
|
+
.mint-topbar__settings-btn--open {
|
|
5847
|
+
background: var(--color-primary-soft);
|
|
5848
|
+
color: var(--_ink-primary);
|
|
5849
|
+
}
|
|
5850
|
+
|
|
5851
|
+
.mint-onboarding-help__chip {
|
|
5852
|
+
display: inline-flex;
|
|
5853
|
+
align-items: center;
|
|
5854
|
+
gap: 0.375rem;
|
|
5855
|
+
height: 2rem;
|
|
5856
|
+
padding: 0 0.625rem;
|
|
5857
|
+
border: 1px solid var(--border-color);
|
|
5858
|
+
border-radius: var(--radius-md);
|
|
5859
|
+
background: transparent;
|
|
5860
|
+
color: var(--text-primary);
|
|
5861
|
+
font: 500 0.8125rem/1 var(--font-sans);
|
|
5862
|
+
white-space: nowrap;
|
|
5863
|
+
cursor: pointer;
|
|
5864
|
+
transition: background-color var(--mint-transition), border-color var(--mint-transition);
|
|
5865
|
+
}
|
|
5866
|
+
|
|
5867
|
+
.mint-onboarding-help__chip:hover {
|
|
5868
|
+
background: var(--bg-hover);
|
|
5869
|
+
}
|
|
5870
|
+
|
|
5871
|
+
.mint-onboarding-help__chip--open {
|
|
5872
|
+
border-color: var(--color-primary);
|
|
5873
|
+
background: var(--color-primary-soft);
|
|
5874
|
+
color: var(--_ink-primary);
|
|
5875
|
+
}
|
|
5876
|
+
|
|
5877
|
+
.mint-onboarding-help__chip:focus-visible {
|
|
5878
|
+
outline: none;
|
|
5879
|
+
box-shadow: var(--focus-ring-offset);
|
|
5880
|
+
}
|
|
5881
|
+
|
|
5882
|
+
.mint-onboarding-help__count {
|
|
5883
|
+
color: var(--text-muted);
|
|
5884
|
+
font: 500 0.75rem/1 var(--font-mono);
|
|
5885
|
+
}
|
|
5886
|
+
|
|
5887
|
+
.mint-onboarding-help__bar {
|
|
5888
|
+
width: 1.75rem;
|
|
5889
|
+
height: 3px;
|
|
5890
|
+
border-radius: 2px;
|
|
5891
|
+
background: var(--bg-tertiary);
|
|
5892
|
+
overflow: hidden;
|
|
5893
|
+
}
|
|
5894
|
+
|
|
5895
|
+
.mint-onboarding-help__bar > span {
|
|
5896
|
+
display: block;
|
|
5897
|
+
height: 100%;
|
|
5898
|
+
background: var(--color-primary);
|
|
5899
|
+
transition: width var(--mint-transition);
|
|
5900
|
+
}
|
|
5901
|
+
|
|
5902
|
+
.mint-onboarding-help__badge {
|
|
5903
|
+
position: absolute;
|
|
5904
|
+
top: -4px;
|
|
5905
|
+
right: -4px;
|
|
5906
|
+
min-width: 16px;
|
|
5907
|
+
height: 16px;
|
|
5908
|
+
padding: 0 4px;
|
|
5909
|
+
box-sizing: border-box;
|
|
5910
|
+
border-radius: 8px;
|
|
5911
|
+
background: var(--color-primary);
|
|
5912
|
+
color: var(--text-on-accent);
|
|
5913
|
+
font: 600 11px/16px var(--font-sans);
|
|
5914
|
+
text-align: center;
|
|
5915
|
+
box-shadow: 0 0 0 2px var(--bg-card);
|
|
5916
|
+
}
|
|
5917
|
+
|
|
5918
|
+
/* ---- Help panel ---- */
|
|
5919
|
+
|
|
5920
|
+
.mint-onboarding-help__panel {
|
|
5921
|
+
position: fixed;
|
|
5922
|
+
z-index: 1000;
|
|
5923
|
+
width: 18rem;
|
|
5924
|
+
padding: 0 0 4px;
|
|
5925
|
+
overflow: hidden;
|
|
5926
|
+
}
|
|
5927
|
+
|
|
5928
|
+
.mint-onboarding-help__header {
|
|
5929
|
+
display: flex;
|
|
5930
|
+
align-items: center;
|
|
5931
|
+
justify-content: space-between;
|
|
5932
|
+
padding: 0.75rem 0.75rem 0.5rem;
|
|
5933
|
+
}
|
|
5934
|
+
|
|
5935
|
+
.mint-onboarding-help__heading {
|
|
5936
|
+
color: var(--text-secondary);
|
|
5937
|
+
font-size: 0.6875rem;
|
|
5938
|
+
font-weight: 600;
|
|
5939
|
+
}
|
|
5940
|
+
|
|
5941
|
+
.mint-onboarding-help__progress {
|
|
5942
|
+
height: 3px;
|
|
5943
|
+
margin: 0 0.75rem 0.25rem;
|
|
5944
|
+
border-radius: 2px;
|
|
5945
|
+
background: var(--bg-tertiary);
|
|
5946
|
+
overflow: hidden;
|
|
5947
|
+
}
|
|
5948
|
+
|
|
5949
|
+
.mint-onboarding-help__progress > span {
|
|
5950
|
+
display: block;
|
|
5951
|
+
height: 100%;
|
|
5952
|
+
background: var(--color-primary);
|
|
5953
|
+
transition: width var(--mint-transition);
|
|
5954
|
+
}
|
|
5955
|
+
|
|
5956
|
+
.mint-onboarding-help__todos {
|
|
5957
|
+
margin: 0;
|
|
5958
|
+
padding: 0;
|
|
5959
|
+
list-style: none;
|
|
5960
|
+
}
|
|
5961
|
+
|
|
5962
|
+
.mint-onboarding-help__todo {
|
|
5963
|
+
display: grid;
|
|
5964
|
+
grid-template-columns: 1rem 1fr auto;
|
|
5965
|
+
align-items: center;
|
|
5966
|
+
gap: 0.5rem;
|
|
5967
|
+
min-height: 1.875rem;
|
|
5968
|
+
padding: 0 0.75rem;
|
|
5969
|
+
color: var(--text-primary);
|
|
5970
|
+
font-size: 0.8125rem;
|
|
5971
|
+
}
|
|
5972
|
+
|
|
5973
|
+
.mint-onboarding-help__check {
|
|
5974
|
+
display: grid;
|
|
5975
|
+
place-items: center;
|
|
5976
|
+
width: 1rem;
|
|
5977
|
+
height: 1rem;
|
|
5978
|
+
box-sizing: border-box;
|
|
5979
|
+
border: 1.5px solid var(--border-color);
|
|
5980
|
+
border-radius: 50%;
|
|
5981
|
+
}
|
|
5982
|
+
|
|
5983
|
+
.mint-onboarding-help__todo--done .mint-onboarding-help__check {
|
|
5984
|
+
border: 0;
|
|
5985
|
+
background: var(--color-primary);
|
|
5986
|
+
color: var(--text-on-accent);
|
|
5987
|
+
}
|
|
5988
|
+
|
|
5989
|
+
.mint-onboarding-help__todo--done .mint-onboarding-help__todo-title {
|
|
5990
|
+
color: var(--text-muted);
|
|
5991
|
+
}
|
|
5992
|
+
|
|
5993
|
+
.mint-onboarding-help__link {
|
|
5994
|
+
padding: 0;
|
|
5995
|
+
border: 0;
|
|
5996
|
+
background: transparent;
|
|
5997
|
+
color: var(--_ink-primary);
|
|
5998
|
+
font-size: 0.75rem;
|
|
5999
|
+
font-weight: 500;
|
|
6000
|
+
white-space: nowrap;
|
|
6001
|
+
cursor: pointer;
|
|
6002
|
+
}
|
|
6003
|
+
|
|
6004
|
+
.mint-onboarding-help__link:hover {
|
|
6005
|
+
text-decoration: underline;
|
|
6006
|
+
}
|
|
6007
|
+
|
|
6008
|
+
.mint-onboarding-help__link:focus-visible {
|
|
6009
|
+
outline: none;
|
|
6010
|
+
border-radius: var(--radius-sm);
|
|
6011
|
+
box-shadow: var(--focus-ring-offset);
|
|
6012
|
+
}
|
|
6013
|
+
|
|
6014
|
+
.mint-onboarding-help__hide {
|
|
6015
|
+
display: block;
|
|
6016
|
+
text-align: left;
|
|
6017
|
+
margin: 0.25rem 0.75rem 0.5rem;
|
|
6018
|
+
color: var(--text-secondary);
|
|
6019
|
+
}
|
|
6020
|
+
|
|
6021
|
+
.mint-onboarding-help__section {
|
|
6022
|
+
padding: 0.625rem 0.75rem 0.25rem;
|
|
6023
|
+
border-top: 1px solid var(--border-color);
|
|
6024
|
+
color: var(--text-secondary);
|
|
6025
|
+
font-size: 0.6875rem;
|
|
6026
|
+
font-weight: 600;
|
|
6027
|
+
}
|
|
6028
|
+
|
|
6029
|
+
.mint-onboarding-help__icon {
|
|
6030
|
+
width: 0.8125rem;
|
|
6031
|
+
height: 0.8125rem;
|
|
6032
|
+
flex-shrink: 0;
|
|
6033
|
+
color: var(--text-muted);
|
|
6034
|
+
}
|
|
6035
|
+
|
|
6036
|
+
.mint-onboarding-help__panel > .mint-menu-item {
|
|
6037
|
+
width: calc(100% - 8px);
|
|
6038
|
+
margin: 0 4px;
|
|
6039
|
+
}
|
|
6040
|
+
|
|
6041
|
+
.mint-onboarding-help__new {
|
|
6042
|
+
margin-left: auto;
|
|
6043
|
+
padding: 3px 4px;
|
|
6044
|
+
border-radius: var(--radius-sm);
|
|
6045
|
+
background: var(--color-primary);
|
|
6046
|
+
color: var(--text-on-accent);
|
|
6047
|
+
font-size: 0.6875rem;
|
|
6048
|
+
font-weight: 600;
|
|
6049
|
+
line-height: 1;
|
|
6050
|
+
}
|
|
6051
|
+
|
|
6052
|
+
/* ---- Tour layer ---- */
|
|
6053
|
+
|
|
6054
|
+
.mint-onboarding {
|
|
6055
|
+
position: fixed;
|
|
6056
|
+
inset: 0;
|
|
6057
|
+
z-index: 1100;
|
|
6058
|
+
pointer-events: none;
|
|
6059
|
+
}
|
|
6060
|
+
|
|
6061
|
+
/* Takes every click outside the card. An advanceOn 'click' step cuts the hole out of it. */
|
|
6062
|
+
.mint-onboarding__blocker {
|
|
6063
|
+
position: absolute;
|
|
6064
|
+
inset: 0;
|
|
6065
|
+
pointer-events: auto;
|
|
6066
|
+
}
|
|
6067
|
+
|
|
6068
|
+
.mint-onboarding__hole {
|
|
6069
|
+
position: fixed;
|
|
6070
|
+
border-radius: var(--radius-lg);
|
|
6071
|
+
box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 9999px var(--mint-onboarding-scrim);
|
|
6072
|
+
pointer-events: none;
|
|
6073
|
+
transition: left 200ms ease, top 200ms ease, width 200ms ease, height 200ms ease;
|
|
6074
|
+
}
|
|
6075
|
+
|
|
6076
|
+
.mint-onboarding__card {
|
|
6077
|
+
position: fixed;
|
|
6078
|
+
display: grid;
|
|
6079
|
+
gap: 0.5rem;
|
|
6080
|
+
box-sizing: border-box;
|
|
6081
|
+
width: 17rem;
|
|
6082
|
+
max-width: calc(100vw - 24px);
|
|
6083
|
+
padding: 0.875rem;
|
|
6084
|
+
border: 1px solid var(--border-color);
|
|
6085
|
+
border-radius: var(--radius-lg);
|
|
6086
|
+
background: var(--bg-card);
|
|
6087
|
+
box-shadow: var(--shadow-lg);
|
|
6088
|
+
color: var(--text-primary);
|
|
6089
|
+
pointer-events: auto;
|
|
6090
|
+
}
|
|
6091
|
+
|
|
6092
|
+
.mint-onboarding__card:focus {
|
|
6093
|
+
outline: none;
|
|
6094
|
+
}
|
|
6095
|
+
|
|
6096
|
+
.mint-onboarding__close {
|
|
6097
|
+
position: absolute;
|
|
6098
|
+
top: 0.5rem;
|
|
6099
|
+
right: 0.5rem;
|
|
6100
|
+
display: grid;
|
|
6101
|
+
place-items: center;
|
|
6102
|
+
width: 1.5rem;
|
|
6103
|
+
height: 1.5rem;
|
|
6104
|
+
padding: 0;
|
|
6105
|
+
border: 0;
|
|
6106
|
+
border-radius: var(--radius);
|
|
6107
|
+
background: transparent;
|
|
6108
|
+
color: var(--text-muted);
|
|
6109
|
+
cursor: pointer;
|
|
6110
|
+
}
|
|
6111
|
+
|
|
6112
|
+
.mint-onboarding__close:hover {
|
|
6113
|
+
background: var(--bg-hover);
|
|
6114
|
+
color: var(--text-primary);
|
|
6115
|
+
}
|
|
6116
|
+
|
|
6117
|
+
.mint-onboarding__close:focus-visible {
|
|
6118
|
+
outline: none;
|
|
6119
|
+
box-shadow: var(--focus-ring-offset);
|
|
6120
|
+
}
|
|
6121
|
+
|
|
6122
|
+
.mint-onboarding__title {
|
|
6123
|
+
margin: 0;
|
|
6124
|
+
padding-right: 1.5rem;
|
|
6125
|
+
font-size: 0.875rem;
|
|
6126
|
+
font-weight: 600;
|
|
6127
|
+
}
|
|
6128
|
+
|
|
6129
|
+
.mint-onboarding__body {
|
|
6130
|
+
margin: 0;
|
|
6131
|
+
color: var(--text-secondary);
|
|
6132
|
+
font-size: 0.8125rem;
|
|
6133
|
+
line-height: 1.45;
|
|
6134
|
+
}
|
|
6135
|
+
|
|
6136
|
+
.mint-onboarding__footer {
|
|
6137
|
+
display: flex;
|
|
6138
|
+
align-items: center;
|
|
6139
|
+
justify-content: flex-end;
|
|
6140
|
+
gap: 0.375rem;
|
|
6141
|
+
margin-top: 0.25rem;
|
|
6142
|
+
}
|
|
6143
|
+
|
|
6144
|
+
.mint-onboarding__count {
|
|
6145
|
+
color: var(--text-muted);
|
|
6146
|
+
font: 500 0.75rem/1.5rem var(--font-mono);
|
|
6147
|
+
margin-top: -0.375rem;
|
|
6148
|
+
}
|
|
6149
|
+
|
|
6150
|
+
/* Read by screen readers only. */
|
|
6151
|
+
.mint-onboarding__sr {
|
|
6152
|
+
position: absolute;
|
|
6153
|
+
width: 1px;
|
|
6154
|
+
height: 1px;
|
|
6155
|
+
overflow: hidden;
|
|
6156
|
+
clip-path: inset(50%);
|
|
6157
|
+
white-space: nowrap;
|
|
6158
|
+
}
|
|
6159
|
+
|
|
6160
|
+
.mint-onboarding__hint {
|
|
6161
|
+
margin-right: auto;
|
|
6162
|
+
color: var(--text-muted);
|
|
6163
|
+
font-size: 0.75rem;
|
|
6164
|
+
}
|
|
6165
|
+
|
|
6166
|
+
/* A dot at the top-right corner of an element with unseen news. */
|
|
6167
|
+
.mint-onboarding__dot {
|
|
6168
|
+
position: fixed;
|
|
6169
|
+
z-index: 40;
|
|
6170
|
+
width: 8px;
|
|
6171
|
+
height: 8px;
|
|
6172
|
+
padding: 0;
|
|
6173
|
+
border: 0;
|
|
6174
|
+
border-radius: 50%;
|
|
6175
|
+
background: var(--color-primary);
|
|
6176
|
+
box-shadow: 0 0 0 2px var(--bg-card);
|
|
6177
|
+
transform: translate(-50%, -50%);
|
|
6178
|
+
cursor: pointer;
|
|
6179
|
+
}
|
|
6180
|
+
|
|
6181
|
+
.mint-onboarding__dot:focus-visible {
|
|
6182
|
+
outline: none;
|
|
6183
|
+
box-shadow: var(--focus-ring-offset);
|
|
6184
|
+
}
|
|
6185
|
+
|
|
6186
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6187
|
+
.mint-onboarding-help__chip,
|
|
6188
|
+
.mint-onboarding-help__bar > span,
|
|
6189
|
+
.mint-onboarding-help__progress > span,
|
|
6190
|
+
.mint-onboarding__hole {
|
|
6191
|
+
transition: none;
|
|
6192
|
+
}
|
|
6193
|
+
}
|
|
6194
|
+
|
|
5826
6195
|
/* PlateEditor (SDK control refresh 7a).
|
|
5827
6196
|
* Wells are WellPlate's (2b, 3a); this file owns the shell: tabs, toolbar, rail. */
|
|
5828
6197
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@morscherlab/mint-sdk",
|
|
3
|
-
"version": "1.4.0-beta.
|
|
3
|
+
"version": "1.4.0-beta.16",
|
|
4
4
|
"description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|