@mithrl/design-system 0.4.0 → 0.4.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/components/approval-card/ApprovalCard.d.ts +68 -65
- package/dist/components/approval-plan-card/ApprovalPlanCard.d.ts +28 -0
- package/dist/components/approval-plan-card/approvalPlanTypes.d.ts +35 -0
- package/dist/components/command-search/CommandSearch.d.ts +64 -0
- package/dist/components/composer/Composer.d.ts +8 -1
- package/dist/components/composer/ComposerUpload.d.ts +65 -0
- package/dist/components/dot-field/DotField.d.ts +102 -0
- package/dist/components/dropdown-menu/DropdownMenu.d.ts +4 -0
- package/dist/components/explorer/Explorer.d.ts +3 -2
- package/dist/components/file-dropzone/FileDropzone.d.ts +17 -0
- package/dist/components/flowchart/Flowchart.d.ts +110 -0
- package/dist/components/flowchart/graphLayout.d.ts +35 -0
- package/dist/components/pixel-loader/PixelLoader.d.ts +94 -0
- package/dist/components/status-orb/StatusOrb.d.ts +2 -2
- package/dist/components/text-reveal/TextReveal.d.ts +62 -0
- package/dist/components/upload-queue/UploadQueue.d.ts +4 -0
- package/dist/index.d.ts +21 -7
- package/dist/index.js +4718 -3095
- package/dist/internal/ResourceTypeIcon.d.ts +17 -0
- package/dist/patterns/approval-plan-review/ApprovalPlanReview.d.ts +55 -0
- package/dist/patterns/approval-plan-review/approvalPlanExample.d.ts +2 -0
- package/dist/styles.css +1 -1
- package/package.json +2 -2
|
@@ -1,70 +1,73 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type FormHTMLAttributes } from "react";
|
|
2
|
+
import { type DropdownMenuContentProps } from "../dropdown-menu/DropdownMenu";
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
export
|
|
4
|
+
export type ApprovalCardMode = "single" | "multi";
|
|
5
|
+
export type ApprovalCardOption = {
|
|
5
6
|
id: string;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export interface ApprovalQuestion {
|
|
7
|
+
title: string;
|
|
8
|
+
subtitle?: string;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
};
|
|
11
|
+
export type ApprovalCardQuestion = {
|
|
12
12
|
id: string;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export type
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
13
|
+
title: string;
|
|
14
|
+
mode: ApprovalCardMode;
|
|
15
|
+
options: readonly ApprovalCardOption[];
|
|
16
|
+
};
|
|
17
|
+
export type ApprovalCardAnswer = {
|
|
18
|
+
selectedOptionIds: readonly string[];
|
|
19
|
+
customValue: string;
|
|
20
|
+
};
|
|
21
|
+
export type ApprovalCardNavigationReason = "previous" | "next" | "continue" | "auto";
|
|
22
|
+
export type ApprovalCardLabels = {
|
|
23
|
+
customAnswer: string;
|
|
24
|
+
previousQuestion: string;
|
|
25
|
+
nextQuestion: string;
|
|
26
|
+
skip: string;
|
|
27
|
+
continue: string;
|
|
28
|
+
submit: string;
|
|
29
|
+
submitting: string;
|
|
30
|
+
};
|
|
31
|
+
type NativeApprovalCardProps = Omit<FormHTMLAttributes<HTMLFormElement>, "children" | "onSubmit">;
|
|
32
|
+
export type ApprovalQuestionCardProps = NativeApprovalCardProps & {
|
|
33
|
+
mode?: never;
|
|
34
|
+
questions: readonly ApprovalCardQuestion[];
|
|
35
|
+
activeQuestionId: string;
|
|
36
|
+
answers: Readonly<Record<string, ApprovalCardAnswer | undefined>>;
|
|
37
|
+
onAnswerChange: (questionId: string, answer: ApprovalCardAnswer) => void;
|
|
38
|
+
onActiveQuestionChange: (questionId: string, reason: ApprovalCardNavigationReason) => void;
|
|
39
|
+
onSubmit: (answers: Readonly<Record<string, ApprovalCardAnswer | undefined>>) => void;
|
|
40
|
+
onSkip?: (questionId: string) => void;
|
|
41
|
+
error?: string;
|
|
42
|
+
submitting?: boolean;
|
|
43
|
+
disabled?: boolean;
|
|
44
|
+
showSkip?: boolean;
|
|
45
|
+
autoAdvanceSingle?: boolean;
|
|
46
|
+
labels?: Partial<ApprovalCardLabels>;
|
|
47
|
+
};
|
|
48
|
+
export type ApprovalCardPermissionDecision = "deny" | "approve-once" | "approve-always";
|
|
49
|
+
export type ApprovalCardPermissionLabels = {
|
|
50
|
+
deny: string;
|
|
51
|
+
approveOnce: string;
|
|
52
|
+
approveAlways: string;
|
|
53
|
+
approvalMenu: string;
|
|
54
|
+
submitting: string;
|
|
55
|
+
};
|
|
56
|
+
export type ApprovalCardPermissionProps = NativeApprovalCardProps & {
|
|
57
|
+
mode: "permission";
|
|
58
|
+
sourceLabel?: string;
|
|
59
|
+
title: string;
|
|
60
|
+
description?: string;
|
|
61
|
+
command?: string;
|
|
62
|
+
onDecision: (decision: ApprovalCardPermissionDecision) => void;
|
|
63
|
+
disabled?: boolean;
|
|
64
|
+
submitting?: boolean;
|
|
65
|
+
labels?: Partial<ApprovalCardPermissionLabels>;
|
|
66
|
+
menuOpen?: boolean;
|
|
67
|
+
defaultMenuOpen?: boolean;
|
|
68
|
+
onMenuOpenChange?: (open: boolean) => void;
|
|
69
|
+
portalContainer?: DropdownMenuContentProps["portalContainer"];
|
|
44
70
|
};
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
* waits: one question per page, a clear way out, and no hidden defaults.
|
|
48
|
-
*/
|
|
49
|
-
export declare const ApprovalCard: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, RestrictedApprovalCardAttribute> & {
|
|
50
|
-
/** Ordered questions. The card pages through them one at a time. */
|
|
51
|
-
questions: ApprovalQuestion[];
|
|
52
|
-
/** Optional heading above the question, e.g. the run the agent is planning. */
|
|
53
|
-
eyebrow?: ReactNode;
|
|
54
|
-
/** Controlled answers. Pair with `onAnswersChange`. */
|
|
55
|
-
answers?: ApprovalAnswers;
|
|
56
|
-
/** Initial answers when the card owns its own state. */
|
|
57
|
-
defaultAnswers?: ApprovalAnswers;
|
|
58
|
-
onAnswersChange?: (answers: ApprovalAnswers) => void;
|
|
59
|
-
/** Fired once the last question is confirmed. */
|
|
60
|
-
onComplete?: (answers: ApprovalAnswers) => void;
|
|
61
|
-
/** Fired when the scientist declines to answer and lets the agent decide. */
|
|
62
|
-
onSkip?: (answers: ApprovalAnswers) => void;
|
|
63
|
-
skipLabel?: string;
|
|
64
|
-
continueLabel?: string;
|
|
65
|
-
/** Label for the final page's primary action. */
|
|
66
|
-
completeLabel?: string;
|
|
67
|
-
/** Require a selection before the primary action enables. @default true */
|
|
68
|
-
requireAnswer?: boolean;
|
|
69
|
-
} & import("react").RefAttributes<HTMLElement>>;
|
|
71
|
+
export type ApprovalCardProps = ApprovalQuestionCardProps | ApprovalCardPermissionProps;
|
|
72
|
+
export declare const ApprovalCard: import("react").ForwardRefExoticComponent<ApprovalCardProps & import("react").RefAttributes<HTMLFormElement>>;
|
|
70
73
|
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { type HTMLAttributes } from "react";
|
|
2
|
+
import { type ApprovalPlan, type ApprovalPlanPhase, type ApprovalPlanStep, type ApprovalPlanSummary } from "./approvalPlanTypes";
|
|
3
|
+
|
|
4
|
+
type NativeApprovalPlanCardProps = Omit<HTMLAttributes<HTMLElement>, "children" | "title">;
|
|
5
|
+
type ApprovalPlanCardReadyProps = {
|
|
6
|
+
state?: "ready";
|
|
7
|
+
onReview: () => void;
|
|
8
|
+
onApprove: () => void;
|
|
9
|
+
approving?: boolean;
|
|
10
|
+
};
|
|
11
|
+
type ApprovalPlanCardRevisingProps = {
|
|
12
|
+
state: "revising";
|
|
13
|
+
onReview?: never;
|
|
14
|
+
onApprove?: never;
|
|
15
|
+
approving?: never;
|
|
16
|
+
};
|
|
17
|
+
export type ApprovalPlanCardProps = NativeApprovalPlanCardProps & (ApprovalPlanCardReadyProps | ApprovalPlanCardRevisingProps) & {
|
|
18
|
+
plan: ApprovalPlan;
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
reviewLabel?: string;
|
|
21
|
+
approveLabel?: string;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Compact execution-plan checkpoint for the Question flow. It intentionally
|
|
25
|
+
* summarizes phase names only; complete steps belong to ApprovalPlanReview.
|
|
26
|
+
*/
|
|
27
|
+
export declare const ApprovalPlanCard: import("react").ForwardRefExoticComponent<ApprovalPlanCardProps & import("react").RefAttributes<HTMLElement>>;
|
|
28
|
+
export type { ApprovalPlan, ApprovalPlanPhase, ApprovalPlanStep, ApprovalPlanSummary, };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
export type ApprovalPlanStep = {
|
|
2
|
+
/** Stable identity within its phase. */
|
|
3
|
+
id: string;
|
|
4
|
+
/** Scannable action label. */
|
|
5
|
+
title: string;
|
|
6
|
+
/** Complete review copy; omitted from the approved compact record. */
|
|
7
|
+
description: string;
|
|
8
|
+
};
|
|
9
|
+
export type ApprovalPlanPhase = {
|
|
10
|
+
/** Stable identity within the plan. */
|
|
11
|
+
id: string;
|
|
12
|
+
/** Concise phase name. */
|
|
13
|
+
title: string;
|
|
14
|
+
/** Optional supporting classification such as Data acquisition. */
|
|
15
|
+
category?: string;
|
|
16
|
+
/** Ordered work within this phase. */
|
|
17
|
+
steps: readonly ApprovalPlanStep[];
|
|
18
|
+
};
|
|
19
|
+
export type ApprovalPlanSummary = {
|
|
20
|
+
scope: string;
|
|
21
|
+
dataSource: string;
|
|
22
|
+
outputs: string;
|
|
23
|
+
};
|
|
24
|
+
export type ApprovalPlan = {
|
|
25
|
+
/** Stable product-owned plan identity. */
|
|
26
|
+
id: string;
|
|
27
|
+
/** Full plan title used by the dedicated review surface. */
|
|
28
|
+
title: string;
|
|
29
|
+
/** Visible product-owned label, for example `Version 1`. */
|
|
30
|
+
version: string;
|
|
31
|
+
/** Ordered execution phases. */
|
|
32
|
+
phases: readonly ApprovalPlanPhase[];
|
|
33
|
+
summary: ApprovalPlanSummary;
|
|
34
|
+
};
|
|
35
|
+
export declare function assertApprovalPlan(plan: ApprovalPlan): void;
|
|
@@ -13,6 +13,22 @@ export type CommandSearchItem = {
|
|
|
13
13
|
onSelect?: (item: CommandSearchItem) => void;
|
|
14
14
|
/** Removes the item from keyboard navigation and selection. */
|
|
15
15
|
disabled?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Opaque consumer payload, carried untouched through selection and
|
|
18
|
+
* `renderItem`. CommandSearch never reads it — it exists so a caller does not
|
|
19
|
+
* have to keep a parallel id-to-record map just to draw an icon or route a
|
|
20
|
+
* command.
|
|
21
|
+
*/
|
|
22
|
+
data?: unknown;
|
|
23
|
+
};
|
|
24
|
+
/** State handed to `renderItem` for one row. */
|
|
25
|
+
export type CommandSearchItemState = {
|
|
26
|
+
/** This row currently carries the roving highlight. */
|
|
27
|
+
active: boolean;
|
|
28
|
+
/** This row is not selectable and is skipped by keyboard navigation. */
|
|
29
|
+
disabled: boolean;
|
|
30
|
+
/** The live query, for a consumer highlighting its own text. */
|
|
31
|
+
query: string;
|
|
16
32
|
};
|
|
17
33
|
export type CommandSearchProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> & {
|
|
18
34
|
items: readonly CommandSearchItem[];
|
|
@@ -31,11 +47,38 @@ export type CommandSearchProps = Omit<HTMLAttributes<HTMLDivElement>, "children"
|
|
|
31
47
|
grouped?: boolean;
|
|
32
48
|
/** Secondary line shown under the empty-state title. */
|
|
33
49
|
emptyHint?: ReactNode;
|
|
50
|
+
/**
|
|
51
|
+
* Run the built-in label/group/hint substring filter. @default true
|
|
52
|
+
*
|
|
53
|
+
* Set `false` when the caller already filtered — an alias-aware catalog or a
|
|
54
|
+
* server content search, say. Every item then renders exactly as supplied
|
|
55
|
+
* and nothing is hidden, so a result that matched on something CommandSearch
|
|
56
|
+
* cannot see (an alias, a synonym, document body text) still appears. Match
|
|
57
|
+
* highlighting is unaffected: a label that happens to contain the query is
|
|
58
|
+
* still marked, and one that does not simply renders plain.
|
|
59
|
+
*/
|
|
60
|
+
filter?: boolean;
|
|
61
|
+
/**
|
|
62
|
+
* Replaces the content of a row — icon, label, status, shortcut, whatever the
|
|
63
|
+
* surface needs. CommandSearch keeps ownership of the listbox and option
|
|
64
|
+
* semantics around it: ids, `role`, `aria-selected`, active handling, pointer
|
|
65
|
+
* and click wiring, and disabled skipping are all unchanged, so a custom row
|
|
66
|
+
* cannot break keyboard navigation.
|
|
67
|
+
*
|
|
68
|
+
* Default row content (marked label plus hint) is used when this is omitted.
|
|
69
|
+
*/
|
|
70
|
+
renderItem?: (item: CommandSearchItem, state: CommandSearchItemState) => ReactNode;
|
|
34
71
|
};
|
|
35
72
|
/**
|
|
36
73
|
* A command palette search surface. CommandSearch renders inline as an
|
|
37
74
|
* embedded panel and can be composed inside a Dialog by the consumer; it owns
|
|
38
75
|
* filtering, match highlighting, and roving keyboard selection only.
|
|
76
|
+
*
|
|
77
|
+
* Both halves of that are optional. A surface whose catalog already knows about
|
|
78
|
+
* aliases, or whose results come back from a server search, passes
|
|
79
|
+
* `filter={false}` and keeps the listbox semantics without the second,
|
|
80
|
+
* narrower filter running behind it. A surface needing richer rows than
|
|
81
|
+
* label-plus-hint passes `renderItem` and keeps the keyboard model.
|
|
39
82
|
*/
|
|
40
83
|
export declare const CommandSearch: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> & {
|
|
41
84
|
items: readonly CommandSearchItem[];
|
|
@@ -54,4 +97,25 @@ export declare const CommandSearch: import("react").ForwardRefExoticComponent<Om
|
|
|
54
97
|
grouped?: boolean;
|
|
55
98
|
/** Secondary line shown under the empty-state title. */
|
|
56
99
|
emptyHint?: ReactNode;
|
|
100
|
+
/**
|
|
101
|
+
* Run the built-in label/group/hint substring filter. @default true
|
|
102
|
+
*
|
|
103
|
+
* Set `false` when the caller already filtered — an alias-aware catalog or a
|
|
104
|
+
* server content search, say. Every item then renders exactly as supplied
|
|
105
|
+
* and nothing is hidden, so a result that matched on something CommandSearch
|
|
106
|
+
* cannot see (an alias, a synonym, document body text) still appears. Match
|
|
107
|
+
* highlighting is unaffected: a label that happens to contain the query is
|
|
108
|
+
* still marked, and one that does not simply renders plain.
|
|
109
|
+
*/
|
|
110
|
+
filter?: boolean;
|
|
111
|
+
/**
|
|
112
|
+
* Replaces the content of a row — icon, label, status, shortcut, whatever the
|
|
113
|
+
* surface needs. CommandSearch keeps ownership of the listbox and option
|
|
114
|
+
* semantics around it: ids, `role`, `aria-selected`, active handling, pointer
|
|
115
|
+
* and click wiring, and disabled skipping are all unchanged, so a custom row
|
|
116
|
+
* cannot break keyboard navigation.
|
|
117
|
+
*
|
|
118
|
+
* Default row content (marked label plus hint) is used when this is omitted.
|
|
119
|
+
*/
|
|
120
|
+
renderItem?: (item: CommandSearchItem, state: CommandSearchItemState) => ReactNode;
|
|
57
121
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
import { type MouseEvent } from "react";
|
|
2
|
+
import { type IconButtonProps } from "../icon-button/IconButton";
|
|
1
3
|
|
|
2
4
|
export type ComposerMode = "guided" | "autopilot";
|
|
3
5
|
export type ComposerStatus = "idle" | "sending" | "streaming";
|
|
4
6
|
export type ComposerPreviewState = "hover" | "focus";
|
|
7
|
+
export type ComposerAddButtonProps = Pick<IconButtonProps, "aria-controls" | "aria-expanded" | "aria-haspopup">;
|
|
5
8
|
export type ComposerLabels = {
|
|
6
9
|
input: string;
|
|
7
10
|
add: string;
|
|
@@ -17,7 +20,11 @@ export type ComposerProps = {
|
|
|
17
20
|
onValueChange?: (value: string) => void;
|
|
18
21
|
onSubmitPrompt?: (value: string, mode: ComposerMode) => void;
|
|
19
22
|
onStop?: () => void;
|
|
20
|
-
onAdd?: () => void;
|
|
23
|
+
onAdd?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
24
|
+
/** Menu relationship metadata when the existing Add action opens a popup. */
|
|
25
|
+
addButtonProps?: ComposerAddButtonProps;
|
|
26
|
+
/** Enables submission when consumer-owned content, such as files, is ready. */
|
|
27
|
+
submissionReady?: boolean;
|
|
21
28
|
mode?: ComposerMode;
|
|
22
29
|
defaultMode?: ComposerMode;
|
|
23
30
|
onModeChange?: (mode: ComposerMode) => void;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { type DragEventHandler } from "react";
|
|
2
|
+
import { type UploadQueueAction, type UploadQueueResource, type UploadQueueStateLabels } from "../upload-queue/UploadQueue";
|
|
3
|
+
import { type ComposerProps } from "./Composer";
|
|
4
|
+
|
|
5
|
+
export type ComposerUploadProps = Omit<ComposerProps, "className" | "onAdd" | "submissionReady"> & {
|
|
6
|
+
/** Product-owned queue rendered above the Composer entry. */
|
|
7
|
+
items: readonly UploadQueueResource[];
|
|
8
|
+
/** Opens the product's native file or folder picker. */
|
|
9
|
+
onBrowse: () => void;
|
|
10
|
+
onRemove?: UploadQueueAction;
|
|
11
|
+
/** Clears every selected resource before upload begins. */
|
|
12
|
+
onClear?: () => void;
|
|
13
|
+
onCancel?: UploadQueueAction;
|
|
14
|
+
onRetry?: UploadQueueAction;
|
|
15
|
+
stateLabels?: Partial<UploadQueueStateLabels>;
|
|
16
|
+
announcement?: string;
|
|
17
|
+
/** Controlled active drop feedback. File traversal remains product-owned. */
|
|
18
|
+
dragging?: boolean;
|
|
19
|
+
/** Plays the approved final queue collapse before the product clears items. */
|
|
20
|
+
dismissing?: boolean;
|
|
21
|
+
onDrop?: DragEventHandler<HTMLDivElement>;
|
|
22
|
+
onDragEnter?: DragEventHandler<HTMLDivElement>;
|
|
23
|
+
onDragLeave?: DragEventHandler<HTMLDivElement>;
|
|
24
|
+
onDragOver?: DragEventHandler<HTMLDivElement>;
|
|
25
|
+
menuTitle?: string;
|
|
26
|
+
browseLabel?: string;
|
|
27
|
+
clearLabel?: string;
|
|
28
|
+
dragHint?: string;
|
|
29
|
+
dropLabel?: string;
|
|
30
|
+
className?: string;
|
|
31
|
+
composerClassName?: string;
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
* Controlled Composer upload composition. It combines the production Composer,
|
|
35
|
+
* Dropdown Menu, and Upload Queue while leaving file traversal, transport, and
|
|
36
|
+
* lifecycle timing with the consuming product.
|
|
37
|
+
*/
|
|
38
|
+
export declare const ComposerUpload: import("react").ForwardRefExoticComponent<Omit<ComposerProps, "className" | "onAdd" | "submissionReady"> & {
|
|
39
|
+
/** Product-owned queue rendered above the Composer entry. */
|
|
40
|
+
items: readonly UploadQueueResource[];
|
|
41
|
+
/** Opens the product's native file or folder picker. */
|
|
42
|
+
onBrowse: () => void;
|
|
43
|
+
onRemove?: UploadQueueAction;
|
|
44
|
+
/** Clears every selected resource before upload begins. */
|
|
45
|
+
onClear?: () => void;
|
|
46
|
+
onCancel?: UploadQueueAction;
|
|
47
|
+
onRetry?: UploadQueueAction;
|
|
48
|
+
stateLabels?: Partial<UploadQueueStateLabels>;
|
|
49
|
+
announcement?: string;
|
|
50
|
+
/** Controlled active drop feedback. File traversal remains product-owned. */
|
|
51
|
+
dragging?: boolean;
|
|
52
|
+
/** Plays the approved final queue collapse before the product clears items. */
|
|
53
|
+
dismissing?: boolean;
|
|
54
|
+
onDrop?: DragEventHandler<HTMLDivElement>;
|
|
55
|
+
onDragEnter?: DragEventHandler<HTMLDivElement>;
|
|
56
|
+
onDragLeave?: DragEventHandler<HTMLDivElement>;
|
|
57
|
+
onDragOver?: DragEventHandler<HTMLDivElement>;
|
|
58
|
+
menuTitle?: string;
|
|
59
|
+
browseLabel?: string;
|
|
60
|
+
clearLabel?: string;
|
|
61
|
+
dragHint?: string;
|
|
62
|
+
dropLabel?: string;
|
|
63
|
+
className?: string;
|
|
64
|
+
composerClassName?: string;
|
|
65
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import { type CSSProperties, type RefObject } from "react";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* A plain rectangle in the field's own coordinate space — CSS pixels measured
|
|
5
|
+
* from the top-left of the canvas, not from the viewport. Stored as a plain
|
|
6
|
+
* object rather than a `DOMRect` so the exclusion maths can be tested without
|
|
7
|
+
* a DOM.
|
|
8
|
+
*/
|
|
9
|
+
export interface DotFieldRect {
|
|
10
|
+
left: number;
|
|
11
|
+
top: number;
|
|
12
|
+
right: number;
|
|
13
|
+
bottom: number;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Spotlight falloff at `distance` from the pointer, in `[0, 1]`.
|
|
17
|
+
*
|
|
18
|
+
* Quadratic rather than linear: the brightened region reads as a soft pool of
|
|
19
|
+
* light with no visible rim, because the derivative goes to zero at the edge.
|
|
20
|
+
* `0` at and beyond `radius`, `1` exactly under the pointer.
|
|
21
|
+
*
|
|
22
|
+
* A non-positive radius disables the spotlight entirely rather than dividing
|
|
23
|
+
* by zero.
|
|
24
|
+
*/
|
|
25
|
+
export declare function dotFieldFalloff(distance: number, radius: number): number;
|
|
26
|
+
/** Grow a rectangle equally on all sides. */
|
|
27
|
+
export declare function dotFieldInflateRect(rect: DotFieldRect, padding: number): DotFieldRect;
|
|
28
|
+
/**
|
|
29
|
+
* Shortest distance from a point to a rectangle. Zero when the point is inside
|
|
30
|
+
* or on the boundary.
|
|
31
|
+
*/
|
|
32
|
+
export declare function dotFieldDistanceToRect(x: number, y: number, rect: DotFieldRect): number;
|
|
33
|
+
/**
|
|
34
|
+
* How much of a dot survives the exclusion halo, in `[0, 1]`.
|
|
35
|
+
*
|
|
36
|
+
* `0` anywhere inside an already-inflated rect — no dot is drawn at all — then
|
|
37
|
+
* a linear ramp back to `1` over `feather` pixels outside it, so the halo has
|
|
38
|
+
* no hard cut. With several rects the smallest value wins, which is what makes
|
|
39
|
+
* overlapping halos merge into one hole instead of cancelling each other out.
|
|
40
|
+
*
|
|
41
|
+
* Rects are expected pre-inflated; `dotFieldInflateRect` does that separately
|
|
42
|
+
* so the padding is applied once per layout rather than once per dot.
|
|
43
|
+
*/
|
|
44
|
+
export declare function dotFieldExclusionAlpha(x: number, y: number, rects: readonly DotFieldRect[], feather: number): number;
|
|
45
|
+
export interface DotFieldProps {
|
|
46
|
+
/** Lattice pitch in CSS pixels. @default 24 */
|
|
47
|
+
spacing?: number;
|
|
48
|
+
/** Radius of a resting dot in CSS pixels. @default 0.5 */
|
|
49
|
+
dotRadius?: number;
|
|
50
|
+
/** Opacity of the resting lattice. @default 0.14 */
|
|
51
|
+
baseAlpha?: number;
|
|
52
|
+
/** Opacity directly under the pointer. @default 0.75 */
|
|
53
|
+
peakAlpha?: number;
|
|
54
|
+
/** Spotlight reach in CSS pixels. @default 180 */
|
|
55
|
+
radius?: number;
|
|
56
|
+
/** Dot scale directly under the pointer. @default 2.6 */
|
|
57
|
+
peakScale?: number;
|
|
58
|
+
/**
|
|
59
|
+
* Element whose pointer movement drives the field. Defaults to the host's
|
|
60
|
+
* own parent, which is the common case: the field is the background layer of
|
|
61
|
+
* the section it reacts to.
|
|
62
|
+
*/
|
|
63
|
+
containerRef?: RefObject<HTMLElement | null>;
|
|
64
|
+
/**
|
|
65
|
+
* Element the lattice makes room for. Its bounding box, inflated by
|
|
66
|
+
* `exclusionPadding` and feathered, renders no dots. One element means one
|
|
67
|
+
* collective halo, however many children it wraps.
|
|
68
|
+
*/
|
|
69
|
+
exclusionRef?: RefObject<HTMLElement | null>;
|
|
70
|
+
/**
|
|
71
|
+
* Static exclusion rects in the field's own coordinate space, as an
|
|
72
|
+
* alternative to `exclusionRef`. Combined with it when both are given.
|
|
73
|
+
*/
|
|
74
|
+
exclusionRects?: readonly DotFieldRect[];
|
|
75
|
+
/** Inflation applied to every exclusion rect. @default 24 */
|
|
76
|
+
exclusionPadding?: number;
|
|
77
|
+
/** Alpha ramp width at the exclusion edge. @default 40 */
|
|
78
|
+
exclusionFeather?: number;
|
|
79
|
+
className?: string;
|
|
80
|
+
style?: CSSProperties;
|
|
81
|
+
}
|
|
82
|
+
/**
|
|
83
|
+
* Cursor-reactive dot lattice, as a full-bleed background layer.
|
|
84
|
+
*
|
|
85
|
+
* At rest it is a dim monotone grid of dots. Under the pointer a soft pool of
|
|
86
|
+
* light brightens and enlarges the dots it covers, trailing the cursor by a
|
|
87
|
+
* frame or two so the surface feels physical rather than pinned. An optional
|
|
88
|
+
* exclusion element punches a feathered hole in the lattice, so content
|
|
89
|
+
* floating above the field keeps a clean field of its own.
|
|
90
|
+
*
|
|
91
|
+
* Performance: the resting lattice is rasterised once to an offscreen canvas
|
|
92
|
+
* and blitted each frame, so per-frame work is bounded by the spotlight's
|
|
93
|
+
* footprint (a few hundred dots) rather than the page's (several thousand).
|
|
94
|
+
* The rAF loop runs only while the pointer is inside and until the eased
|
|
95
|
+
* pointer settles; an untouched field costs nothing.
|
|
96
|
+
*
|
|
97
|
+
* Colour is resolved from `--color-foreground` at draw time and re-resolved
|
|
98
|
+
* when `data-theme` changes, so the field is monotone and correct in both
|
|
99
|
+
* themes without a theme prop. It is decorative: `aria-hidden` and inert to
|
|
100
|
+
* pointer events.
|
|
101
|
+
*/
|
|
102
|
+
export declare function DotField({ spacing, dotRadius, baseAlpha, peakAlpha, radius, peakScale, containerRef, exclusionRef, exclusionRects, exclusionPadding, exclusionFeather, className, style, }: DotFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -33,6 +33,8 @@ export type DropdownMenuContentProps = Omit<ComponentPropsWithoutRef<typeof Menu
|
|
|
33
33
|
finalFocus?: ComponentPropsWithoutRef<typeof Menu.Popup>["finalFocus"];
|
|
34
34
|
/** Accessible name when no visible group label names the menu. */
|
|
35
35
|
"aria-label"?: string;
|
|
36
|
+
/** Stable id applied to the role=menu popup for external trigger relationships. */
|
|
37
|
+
popupId?: string;
|
|
36
38
|
};
|
|
37
39
|
/**
|
|
38
40
|
* Portalled, collision-aware menu surface. Trigger styling remains external.
|
|
@@ -55,6 +57,8 @@ export declare const DropdownMenuContent: import("react").ForwardRefExoticCompon
|
|
|
55
57
|
finalFocus?: ComponentPropsWithoutRef<typeof Menu.Popup>["finalFocus"];
|
|
56
58
|
/** Accessible name when no visible group label names the menu. */
|
|
57
59
|
"aria-label"?: string;
|
|
60
|
+
/** Stable id applied to the role=menu popup for external trigger relationships. */
|
|
61
|
+
popupId?: string;
|
|
58
62
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
59
63
|
export type DropdownMenuGroupProps = Omit<ComponentPropsWithoutRef<typeof Menu.Group>, "className"> & {
|
|
60
64
|
className?: string;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { type HTMLAttributes, type MouseEvent, type MouseEventHandler, type ReactNode } from "react";
|
|
2
|
+
import { type ScientificOutputResourceType, type UploadResourceType } from "../../internal/ResourceTypeIcon";
|
|
2
3
|
|
|
3
|
-
export type ExplorerUploadFileType =
|
|
4
|
-
export type ExplorerScientificOutputType =
|
|
4
|
+
export type ExplorerUploadFileType = UploadResourceType;
|
|
5
|
+
export type ExplorerScientificOutputType = ScientificOutputResourceType;
|
|
5
6
|
type ExplorerResourceBase = {
|
|
6
7
|
/** Stable owner-defined identity. IDs are unique across the whole Explorer. */
|
|
7
8
|
id: string;
|
|
@@ -12,6 +12,7 @@ export type FileDropzoneRejection = {
|
|
|
12
12
|
message: string;
|
|
13
13
|
};
|
|
14
14
|
export type FileDropzoneState = "default" | "drag-active" | "drag-rejected" | "disabled" | "selection-received";
|
|
15
|
+
export type FileDropzoneDensity = "default" | "compact";
|
|
15
16
|
export type FileDropzoneHandle = {
|
|
16
17
|
browseFiles: () => void;
|
|
17
18
|
browseFolder: () => void;
|
|
@@ -27,6 +28,14 @@ export type FileDropzoneProps = Omit<HTMLAttributes<HTMLDivElement>, "children"
|
|
|
27
28
|
maxFiles?: number;
|
|
28
29
|
maxFileSize?: number;
|
|
29
30
|
disabled?: boolean;
|
|
31
|
+
/** Default is the standalone acquisition surface; compact pairs with a visible Upload Queue. */
|
|
32
|
+
density?: FileDropzoneDensity;
|
|
33
|
+
/** Mirrors a consumer-owned selected-resource collection into the settled visual state. */
|
|
34
|
+
hasSelection?: boolean;
|
|
35
|
+
/** Settled-state action label. State feedback temporarily replaces it while dragging. */
|
|
36
|
+
actionLabel?: string;
|
|
37
|
+
/** Settled-state helper copy. State feedback temporarily replaces it while dragging. */
|
|
38
|
+
helperText?: string;
|
|
30
39
|
onSelection?: (selection: FileDropzoneSelection) => void;
|
|
31
40
|
onReject?: (rejection: FileDropzoneRejection) => void;
|
|
32
41
|
/** Review-only state hook used by Storybook and visual regression tests. */
|
|
@@ -47,6 +56,14 @@ export declare const FileDropzone: import("react").ForwardRefExoticComponent<Omi
|
|
|
47
56
|
maxFiles?: number;
|
|
48
57
|
maxFileSize?: number;
|
|
49
58
|
disabled?: boolean;
|
|
59
|
+
/** Default is the standalone acquisition surface; compact pairs with a visible Upload Queue. */
|
|
60
|
+
density?: FileDropzoneDensity;
|
|
61
|
+
/** Mirrors a consumer-owned selected-resource collection into the settled visual state. */
|
|
62
|
+
hasSelection?: boolean;
|
|
63
|
+
/** Settled-state action label. State feedback temporarily replaces it while dragging. */
|
|
64
|
+
actionLabel?: string;
|
|
65
|
+
/** Settled-state helper copy. State feedback temporarily replaces it while dragging. */
|
|
66
|
+
helperText?: string;
|
|
50
67
|
onSelection?: (selection: FileDropzoneSelection) => void;
|
|
51
68
|
onReject?: (rejection: FileDropzoneRejection) => void;
|
|
52
69
|
/** Review-only state hook used by Storybook and visual regression tests. */
|