@reopt-ai/opt-ui 1.14.0 → 1.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +45 -0
- package/COMPONENT_CATALOG.md +222 -69
- package/README.md +26 -0
- package/dist/core/index.cjs +4 -4
- package/dist/core/index.d.cts +2 -2
- package/dist/core/index.d.ts +2 -2
- package/dist/core/index.js +2 -2
- package/dist/docs/02-components/01-core.md +37 -33
- package/dist/docs/02-components/02-visuals.md +1 -1
- package/dist/docs/02-components/03-shells.md +191 -36
- package/dist/docs/02-components/04-surfaces.md +1 -1
- package/dist/docs/02-components/index.md +4 -4
- package/dist/id-registry.cjs +24 -0
- package/dist/id-registry.js +24 -0
- package/dist/id-registry.json +51 -0
- package/dist/index.cjs +445 -381
- package/dist/index.d.cts +16 -13
- package/dist/index.d.ts +16 -13
- package/dist/index.js +303 -245
- package/dist/{key-pad-menu-CqFI6la9.js → key-pad-menu-BCOeYvsH.js} +50 -61
- package/dist/{key-pad-menu-D6pYzaj-.d.cts → key-pad-menu-CaIsTHB2.d.cts} +12 -8
- package/dist/{key-pad-menu-BgtSL3xe.cjs → key-pad-menu-Jaqxhx9P.cjs} +48 -71
- package/dist/{key-pad-menu-Yh7Fpb8m.d.ts → key-pad-menu-odAEycIX.d.ts} +12 -8
- package/dist/meta.cjs +447 -7
- package/dist/meta.js +447 -7
- package/dist/{field-sidebar-mSVCMAZp.js → replay-player-layout-BVUNsUS1.js} +891 -191
- package/dist/{field-sidebar-ePqFX6MN.cjs → replay-player-layout-Cmzptq89.cjs} +931 -189
- package/dist/{field-sidebar-CJ4HxP8D.d.cts → replay-player-layout-DpqdfdQ6.d.ts} +246 -3
- package/dist/{field-sidebar-DnhpcT2A.d.ts → replay-player-layout-DuZW-gFF.d.cts} +246 -3
- package/dist/shells/index.cjs +58 -52
- package/dist/shells/index.d.cts +2 -2
- package/dist/shells/index.d.ts +2 -2
- package/dist/shells/index.js +2 -2
- package/dist/{text-truncate-Bd-0WkSP.js → text-truncate-B-8nJgnu.js} +200 -101
- package/dist/{text-truncate-Bbul-jMD.d.cts → text-truncate-DOxUijpB.d.cts} +2 -0
- package/dist/{text-truncate-Bbul-jMD.d.ts → text-truncate-DOxUijpB.d.ts} +2 -0
- package/dist/{text-truncate-BeYW6XZu.cjs → text-truncate-gQhpMy-Z.cjs} +214 -97
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
|
-
import { U as StatCard$1, g as DateRangePickerProps } from "./text-truncate-
|
|
2
|
+
import { U as StatCard$1, g as DateRangePickerProps } from "./text-truncate-DOxUijpB.js";
|
|
3
3
|
import * as React$1 from "react";
|
|
4
4
|
import { CSSProperties, ComponentPropsWithoutRef, HTMLAttributes, ImgHTMLAttributes, ReactNode } from "react";
|
|
5
|
-
import { AccordionContentProps as PrimAccordionContentProps, AccordionItemProps as PrimAccordionItemProps, AccordionRootProps, AccordionTriggerProps as PrimAccordionTriggerProps, AlertDialogPanelProps, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInputProps, ComboboxItemProps, ComboboxPopoverProps, ComboboxRootProps, Composite, CompositeItem, CompositeProvider, CompositeRow, DialogPanelProps, DialogRootProps, DisclosureContentProps as PrimDisclosureContentProps, DisclosureRootProps, DisclosureTriggerProps as PrimDisclosureTriggerProps, FormCheckboxProps, FormDescriptionProps, FormErrorProps, FormFieldProps, FormGroupLabelProps, FormGroupProps, FormInputProps, FormLabelProps, FormProvider, FormPushProps, FormRadioGroupProps, FormRadioProps, FormRemoveProps, FormResetProps, FormRootProps, FormStoreInstance, FormSubmitProps, FormSwitchProps, MenuButtonArrowProps, MenuItemCheckboxProps, MenuItemProps, MenuItemRadioProps, MenuPopoverProps, MenuRootProps, MenuSeparatorProps, MenuTriggerProps, MenubarContainerProps, MenubarRootProps, PopoverCloseProps, PopoverContentProps, PopoverRootProps, PopoverTriggerProps, SelectItemProps, SelectLabelProps, SelectPopoverProps, SelectRootProps, SelectTriggerProps, TabListProps, TabPanelProps, TabProps, TabsRootProps, ToggleGroupProps, ToggleProps, ToolbarButtonProps, ToolbarContainerProps, ToolbarRootProps, ToolbarSeparatorProps, TooltipAnchorProps, TooltipProps, TooltipRootProps, useFieldValue, useFormContext, useFormStore } from "@reopt-ai/opt-ui-primitives";
|
|
5
|
+
import { AccordionContentProps as PrimAccordionContentProps, AccordionItemProps as PrimAccordionItemProps, AccordionRootProps, AccordionTriggerProps as PrimAccordionTriggerProps, AlertDialogPanelProps, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInputProps, ComboboxItemProps, ComboboxPopoverProps, ComboboxRootProps, Composite, CompositeItem, CompositeProvider, CompositeRow, DialogPanelProps, DialogRootProps, DisclosureContentProps as PrimDisclosureContentProps, DisclosureRootProps, DisclosureTriggerProps as PrimDisclosureTriggerProps, FormCheckboxProps, FormDescriptionProps, FormErrorProps, FormFieldProps, FormGroupLabelProps, FormGroupProps, FormInputProps, FormLabelProps, FormProvider, FormPushProps, FormRadioGroupProps, FormRadioProps, FormRemoveProps, FormResetProps, FormRootProps, FormStoreInstance, FormSubmitProps, FormSwitchProps, FormTextareaProps, MenuButtonArrowProps, MenuItemCheckboxProps, MenuItemProps, MenuItemRadioProps, MenuPopoverProps, MenuRootProps, MenuSeparatorProps, MenuTriggerProps, MenubarContainerProps, MenubarRootProps, PopoverCloseProps, PopoverContentProps, PopoverRootProps, PopoverTriggerProps, SelectItemProps, SelectLabelProps, SelectPopoverProps, SelectRootProps, SelectTriggerProps, TabListProps, TabPanelProps, TabProps, TabsRootProps, ToggleGroupProps, ToggleProps, ToolbarButtonProps, ToolbarContainerProps, ToolbarRootProps, ToolbarSeparatorProps, TooltipAnchorProps, TooltipProps, TooltipRootProps, useFieldValue, useFormContext, useFormStore } from "@reopt-ai/opt-ui-primitives";
|
|
6
6
|
import { GroupImperativeHandle, GroupProps, Layout, PanelImperativeHandle, PanelProps, PanelSize, SeparatorProps } from "react-resizable-panels";
|
|
7
7
|
//#region src/core/kbd.d.ts
|
|
8
8
|
/** Props for the kbd component. */
|
|
@@ -1144,6 +1144,8 @@ interface SliderProps {
|
|
|
1144
1144
|
value?: number;
|
|
1145
1145
|
defaultValue?: number;
|
|
1146
1146
|
onChange?: (value: number) => void;
|
|
1147
|
+
/** Called once when a pointer or keyboard edit finishes; useful for expensive seeks. */
|
|
1148
|
+
onValueCommit?: (value: number) => void;
|
|
1147
1149
|
min?: number;
|
|
1148
1150
|
max?: number;
|
|
1149
1151
|
step?: number;
|
|
@@ -1157,7 +1159,7 @@ interface SliderProps {
|
|
|
1157
1159
|
"aria-label"?: string;
|
|
1158
1160
|
}
|
|
1159
1161
|
/** Renders the slider component. */
|
|
1160
|
-
declare function Slider({ value: controlledValue, defaultValue, onChange, min, max, step, label, showValue, formatValue, disabled, className, "aria-label": ariaLabel }: SliderProps): import("react").JSX.Element;
|
|
1162
|
+
declare function Slider({ value: controlledValue, defaultValue, onChange, onValueCommit, min, max, step, label, showValue, formatValue, disabled, className, "aria-label": ariaLabel }: SliderProps): import("react").JSX.Element;
|
|
1161
1163
|
declare namespace Slider {
|
|
1162
1164
|
var displayName: string;
|
|
1163
1165
|
}
|
|
@@ -1260,23 +1262,24 @@ type FormInputProps$1 = FormInputProps;
|
|
|
1260
1262
|
/** Renders the form input component. */
|
|
1261
1263
|
declare function FormInput$1({ className, ...props }: FormInputProps$1): import("react").JSX.Element;
|
|
1262
1264
|
/** Props for the form textarea component. */
|
|
1263
|
-
type FormTextareaProps =
|
|
1264
|
-
name: string;
|
|
1265
|
+
type FormTextareaProps$1 = FormTextareaProps & {
|
|
1265
1266
|
resize?: "none" | "vertical" | "horizontal" | "both";
|
|
1266
1267
|
};
|
|
1267
1268
|
/** Renders the form textarea component. */
|
|
1268
|
-
declare function FormTextarea({ className, resize, rows, name, ...props }: FormTextareaProps): import("react").JSX.Element;
|
|
1269
|
+
declare function FormTextarea$1({ className, resize, rows, name, ...props }: FormTextareaProps$1): import("react").JSX.Element;
|
|
1269
1270
|
/** Props for the form select component. */
|
|
1270
1271
|
type FormSelectProps = {
|
|
1271
1272
|
name: string;
|
|
1273
|
+
id?: string;
|
|
1272
1274
|
children: React.ReactNode;
|
|
1273
1275
|
className?: string;
|
|
1274
1276
|
placeholder?: string;
|
|
1275
1277
|
minWidth?: number | string;
|
|
1276
1278
|
"aria-label"?: string;
|
|
1279
|
+
"aria-describedby"?: string;
|
|
1277
1280
|
};
|
|
1278
1281
|
/** Renders the form select component. */
|
|
1279
|
-
declare function FormSelect({ name, children, className, placeholder, minWidth, "aria-label": ariaLabel }: FormSelectProps): import("react").JSX.Element;
|
|
1282
|
+
declare function FormSelect({ name, id, children, className, placeholder, minWidth, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }: FormSelectProps): import("react").JSX.Element;
|
|
1280
1283
|
type FormSelectPopoverProps = ComponentPropsWithoutRef<typeof SelectPopover$1>;
|
|
1281
1284
|
/** Renders the form select popover component. */
|
|
1282
1285
|
declare function FormSelectPopover({ className, ...props }: FormSelectPopoverProps): import("react").JSX.Element;
|
|
@@ -2195,6 +2198,7 @@ declare function ColorPalettePicker({ palettes, value, onValueChange, label, hid
|
|
|
2195
2198
|
//#region src/core/inline-edit.d.ts
|
|
2196
2199
|
/** Localized strings for inline editing. */
|
|
2197
2200
|
interface InlineEditLabels {
|
|
2201
|
+
input?: string;
|
|
2198
2202
|
edit?: (value: string) => string;
|
|
2199
2203
|
save?: string;
|
|
2200
2204
|
cancel?: string;
|
|
@@ -2299,4 +2303,4 @@ interface KeyPadMenuProps {
|
|
|
2299
2303
|
*/
|
|
2300
2304
|
declare function KeyPadMenu({ items, label, selection, value, onValueChange, columns, size, hideLabel, className }: KeyPadMenuProps): import("react").JSX.Element;
|
|
2301
2305
|
//#endregion
|
|
2302
|
-
export { DrawerSize as $, DescriptionListLabels as $i, ToolbarButton$1 as $n, DisclosureContent$1 as $r, FormColorPicker as $t, ShaderSurfaceHandle as A, TextElement as Aa, AlertProps as Ai, FormSubmit$1 as An, DialogFooter as Ar, CheckboxGroupProps as At, ShaderPresetCategory as B, CardDescription as Bi, TagInput as Bn, SelectPopover$1 as Br, PopoverRoot$1 as Bt, Facet as C, Separator$2 as Ca, SkeletonTable as Ci, FormSelectItem as Cn, AlertDialogPanel$1 as Cr, BlockLayoutProps as Ct, FacetItem as D, HeadingProps as Da, Input as Di, FormSliderProps as Dn, DialogDescription$1 as Dr, RadioProps as Dt, FacetGroupProps as E, HeadingLevel as Ea, SwitchProps as Ei, FormSlider as En, DialogBodyProps as Er, RadioGroupProps as Et, SHADER_PRESETS as F, KbdProps as Fa, Button as Fi, FormTextarea as Fn, DialogPanel$1 as Fr, DropdownSeparator as Ft, VirtualListProps as G, CardHeaderProps as Gi, ColorPicker as Gn, TabListProps$1 as Gr, ConditionDef as Gt, getShaderFragment as H, CardFooter as Hi, IconDef as Hn, SelectTrigger$1 as Hr, ConditionBuilder as Ht, SHADER_PRESET_IDS as I, ButtonProps as Ii, FormTextareaProps as In, DialogRoot$1 as Ir, DropdownTrigger as It, DrawerClose as J, CardTitleProps as Ji, StarRatingProps as Jn, TabProps$1 as Jr, ConditionTypeRenderer as Jt, Pagination as K, CardProps as Ki, ColorPickerProps as Kn, TabPanel$1 as Kr, ConditionGroup as Kt, ShaderParamKey as L, Card as Li, useFieldValue as Ln, DialogSize as Lr, PopoverClose$1 as Lt, SHADER_OVERLAY_PARAM_KEYS as M, TextRole as Ma, SpinnerProps as Mi, FormSwitchProps$1 as Mn, DialogHeader as Mr, DropdownContent as Mt, SHADER_PARAM_FALLBACK as N, TextTone as Na, Badge as Ni, FormTagInput as Nn, DialogHeaderProps as Nr, DropdownItem as Nt, FacetProps as O, HeadingRole as Oa, InputProps as Oi, FormStarRating as On, DialogDisclosure$1 as Or, Checkbox as Ot, SHADER_PARAM_KEYS as P, Kbd as Pa, BadgeProps as Pi, FormTagInputProps as Pn, DialogHeading$1 as Pr, DropdownMenu as Pt, DrawerSide as Q, DescriptionListItem as Qi, NumberInputProps as Qn, TabsVariant as Qr, FormCheckbox$1 as Qt, ShaderParamSpec as R, CardContent as Ri, useFormContext as Rn, SelectItem$1 as Rr, PopoverContent$1 as Rt, ExpressionTone as S, OtpFieldProps as Sa, SkeletonProps as Si, FormSelect as Sn, ComboboxRoot$1 as Sr, BlockLayout as St, FacetGroupLabels as T, Heading as Ta, Switch as Ti, FormSelectProps as Tn, DialogBody as Tr, RadioGroup as Tt, getShaderPreset as U, CardFooterProps as Ui, IconPicker as Un, Tab$1 as Ur, ConditionBuilderLabels as Ut, ShaderPresetId as V, CardDescriptionProps as Vi, TagInputProps as Vn, SelectRoot$1 as Vr, PopoverTrigger$1 as Vt, VirtualList as W, CardHeader as Wi, IconPickerProps as Wn, TabList$1 as Wr, ConditionBuilderProps as Wt, DrawerPanelProps as X, IdentityProps as Xi, SliderProps as Xn, TabsRoot$1 as Xr, StepBuilderProps as Xt, DrawerPanel as Y, Identity as Yi, Slider as Yn, TabStatus as Yr, StepBuilder as Yt, DrawerRoot as Z, DescriptionList as Zi, NumberInput as Zn, TabsRootProps$1 as Zr, StepDef as Zt, HighlightProps as _, Toggle$1 as _a, Textarea as _i, FormRadio$1 as _n, ComboboxGroup$1 as _r, ScrollAreaProps as _t, InlineEditLabels as a, BreadcrumbItem as aa, CompositeRow as ai, FormError$1 as an, TooltipProvider as ar, PanelSize as at, ExpressionGroupProps as b, ToggleProps$1 as ba, SkeletonAvatar as bi, FormReset$1 as bn, ComboboxItem$1 as br, BlockBaseProps as bt, ColorPaletteDisplay as c, StatCardProps as ca, MeterProps as ci, FormGroupLabel$1 as cn, MenuItemCheckbox$1 as cr, ResizablePanel as ct, ColorPalettePickerProps as d, AccordionRoot$1 as da, Progress as di, FormInput$1 as dn, MenuRoot$1 as dr, ResizablePanelProps as dt, DescriptionListProps as ea, DisclosureRoot$1 as ei, FormColorPickerProps as en, ToolbarContainer$1 as er, Logo as et, PaletteKind as f, AccordionRootProps as fa, ProgressProps as fi, FormLabel$1 as fn, MenuSeparator$1 as fr, Section as ft, Highlight as g, PrimAccordionTriggerProps as ga, AvatarProps as gi, FormPush$1 as gn, ComboboxEmpty as gr, ScrollArea as gt, LiveRegionProps as h, PrimAccordionItemProps as ha, AvatarGroupProps as hi, FormProvider$1 as hn, MenubarRoot$1 as hr, ContainerProps as ht, InlineEdit as i, Breadcrumb as ia, CompositeProvider as ii, FormDescription$1 as in, TooltipAnchor$1 as ir, PanelImperativeHandle as it, ShaderSurfaceProps as j, TextProps as ja, Spinner as ji, FormSwitch$1 as jn, DialogFooterProps as jr, CheckboxProps as jt, ShaderSurface as k, Text as ka, Alert as ki, FormStarRatingProps as kn, DialogDismiss$1 as kr, CheckboxGroup as kt, ColorPaletteDisplayProps as l, AccordionContent$1 as la, CircularProgress as li, FormIconPicker as ln, MenuItemRadio$1 as lr, ResizablePanelGroup as lt, LiveRegion as m, PrimAccordionContentProps as ma, AvatarGroup as mi, FormNumberInputProps as mn, MenubarContainer$1 as mr, Container as mt, KeyPadMenu as n, EmptyStateAction as na, Composite as ni, FormDateRangePicker as nn, ToolbarSeparator$1 as nr, GroupImperativeHandle as nt, InlineEditProps as o, BreadcrumbProps as oa, CompositeZone as oi, FormField$1 as on, MenuButtonArrow$1 as or, ResizableHandle as ot, THEME_PALETTES as p, AccordionTrigger$1 as pa, Avatar as pi, FormNumberInput as pn, MenuTrigger$1 as pr, SectionProps as pt, PaginationProps as q, CardTitle as qi, StarRating as qn, TabPanelProps$1 as qr, ConditionOperator as qt, KeyPadMenuProps as r, EmptyStateProps as ra, CompositeItem as ri, FormDateRangePickerProps as rn, Tooltip$1 as rr, Layout as rt, ColorPalette as s, StatCard as sa, Meter$1 as si, FormGroup$1 as sn, MenuItem$1 as sr, ResizableHandleProps as st, KeyPadItem as t, EmptyState as ta, DisclosureTrigger$1 as ti, FormControl$1 as tn, ToolbarRoot$1 as tr, LogoProps as tt, ColorPalettePicker as u, AccordionItem$1 as ua, CircularProgressProps as ui, FormIconPickerProps as un, MenuPopover$1 as ur, ResizablePanelGroupProps as ut, Expression as v, ToggleGroup$1 as va, TextareaProps as vi, FormRadioGroup$1 as vn, ComboboxGroupLabel$1 as vr, PageHeader as vt, FacetGroup as w, SeparatorProps$1 as wa, SkeletonText as wi, FormSelectPopover as wn, AlertDialogPanelProps$1 as wr, Radio$1 as wt, ExpressionProps as x, OtpField as xa, SkeletonCard as xi, FormRoot$1 as xn, ComboboxPopover$1 as xr, createBlock as xt, ExpressionGroup as y, ToggleGroupProps$1 as ya, Skeleton as yi, FormRemove$1 as yn, ComboboxInput$1 as yr, PageHeaderProps as yt, ShaderPreset as z, CardContentProps as zi, useFormStore as zn, SelectLabel$1 as zr, PopoverContentProps$1 as zt };
|
|
2306
|
+
export { DrawerSize as $, DescriptionListLabels as $i, ToolbarButton$1 as $n, DisclosureContent$1 as $r, FormColorPicker as $t, ShaderSurfaceHandle as A, TextElement as Aa, AlertProps as Ai, FormSubmit$1 as An, DialogFooter as Ar, CheckboxGroupProps as At, ShaderPresetCategory as B, CardDescription as Bi, TagInput as Bn, SelectPopover$1 as Br, PopoverRoot$1 as Bt, Facet as C, Separator$2 as Ca, SkeletonTable as Ci, FormSelectItem as Cn, AlertDialogPanel$1 as Cr, BlockLayoutProps as Ct, FacetItem as D, HeadingProps as Da, Input as Di, FormSliderProps as Dn, DialogDescription$1 as Dr, RadioProps as Dt, FacetGroupProps as E, HeadingLevel as Ea, SwitchProps as Ei, FormSlider as En, DialogBodyProps as Er, RadioGroupProps as Et, SHADER_PRESETS as F, KbdProps as Fa, Button as Fi, FormTextarea$1 as Fn, DialogPanel$1 as Fr, DropdownSeparator as Ft, VirtualListProps as G, CardHeaderProps as Gi, ColorPicker as Gn, TabListProps$1 as Gr, ConditionDef as Gt, getShaderFragment as H, CardFooter as Hi, IconDef as Hn, SelectTrigger$1 as Hr, ConditionBuilder as Ht, SHADER_PRESET_IDS as I, ButtonProps as Ii, FormTextareaProps$1 as In, DialogRoot$1 as Ir, DropdownTrigger as It, DrawerClose as J, CardTitleProps as Ji, StarRatingProps as Jn, TabProps$1 as Jr, ConditionTypeRenderer as Jt, Pagination as K, CardProps as Ki, ColorPickerProps as Kn, TabPanel$1 as Kr, ConditionGroup as Kt, ShaderParamKey as L, Card as Li, useFieldValue as Ln, DialogSize as Lr, PopoverClose$1 as Lt, SHADER_OVERLAY_PARAM_KEYS as M, TextRole as Ma, SpinnerProps as Mi, FormSwitchProps$1 as Mn, DialogHeader as Mr, DropdownContent as Mt, SHADER_PARAM_FALLBACK as N, TextTone as Na, Badge as Ni, FormTagInput as Nn, DialogHeaderProps as Nr, DropdownItem as Nt, FacetProps as O, HeadingRole as Oa, InputProps as Oi, FormStarRating as On, DialogDisclosure$1 as Or, Checkbox as Ot, SHADER_PARAM_KEYS as P, Kbd as Pa, BadgeProps as Pi, FormTagInputProps as Pn, DialogHeading$1 as Pr, DropdownMenu as Pt, DrawerSide as Q, DescriptionListItem as Qi, NumberInputProps as Qn, TabsVariant as Qr, FormCheckbox$1 as Qt, ShaderParamSpec as R, CardContent as Ri, useFormContext as Rn, SelectItem$1 as Rr, PopoverContent$1 as Rt, ExpressionTone as S, OtpFieldProps as Sa, SkeletonProps as Si, FormSelect as Sn, ComboboxRoot$1 as Sr, BlockLayout as St, FacetGroupLabels as T, Heading as Ta, Switch as Ti, FormSelectProps as Tn, DialogBody as Tr, RadioGroup as Tt, getShaderPreset as U, CardFooterProps as Ui, IconPicker as Un, Tab$1 as Ur, ConditionBuilderLabels as Ut, ShaderPresetId as V, CardDescriptionProps as Vi, TagInputProps as Vn, SelectRoot$1 as Vr, PopoverTrigger$1 as Vt, VirtualList as W, CardHeader as Wi, IconPickerProps as Wn, TabList$1 as Wr, ConditionBuilderProps as Wt, DrawerPanelProps as X, IdentityProps as Xi, SliderProps as Xn, TabsRoot$1 as Xr, StepBuilderProps as Xt, DrawerPanel as Y, Identity as Yi, Slider as Yn, TabStatus as Yr, StepBuilder as Yt, DrawerRoot as Z, DescriptionList as Zi, NumberInput as Zn, TabsRootProps$1 as Zr, StepDef as Zt, HighlightProps as _, Toggle$1 as _a, Textarea as _i, FormRadio$1 as _n, ComboboxGroup$1 as _r, ScrollAreaProps as _t, InlineEditLabels as a, BreadcrumbItem as aa, CompositeRow as ai, FormError$1 as an, TooltipProvider as ar, PanelSize as at, ExpressionGroupProps as b, ToggleProps$1 as ba, SkeletonAvatar as bi, FormReset$1 as bn, ComboboxItem$1 as br, BlockBaseProps as bt, ColorPaletteDisplay as c, StatCardProps as ca, MeterProps as ci, FormGroupLabel$1 as cn, MenuItemCheckbox$1 as cr, ResizablePanel as ct, ColorPalettePickerProps as d, AccordionRoot$1 as da, Progress as di, FormInput$1 as dn, MenuRoot$1 as dr, ResizablePanelProps as dt, DescriptionListProps as ea, DisclosureRoot$1 as ei, FormColorPickerProps as en, ToolbarContainer$1 as er, Logo as et, PaletteKind as f, AccordionRootProps as fa, ProgressProps as fi, FormLabel$1 as fn, MenuSeparator$1 as fr, Section as ft, Highlight as g, PrimAccordionTriggerProps as ga, AvatarProps as gi, FormPush$1 as gn, ComboboxEmpty as gr, ScrollArea as gt, LiveRegionProps as h, PrimAccordionItemProps as ha, AvatarGroupProps as hi, FormProvider$1 as hn, MenubarRoot$1 as hr, ContainerProps as ht, InlineEdit as i, Breadcrumb as ia, CompositeProvider as ii, FormDescription$1 as in, TooltipAnchor$1 as ir, PanelImperativeHandle as it, ShaderSurfaceProps as j, TextProps as ja, Spinner as ji, FormSwitch$1 as jn, DialogFooterProps as jr, CheckboxProps as jt, ShaderSurface as k, Text as ka, Alert as ki, FormStarRatingProps as kn, DialogDismiss$1 as kr, CheckboxGroup as kt, ColorPaletteDisplayProps as l, AccordionContent$1 as la, CircularProgress as li, FormIconPicker as ln, MenuItemRadio$1 as lr, ResizablePanelGroup as lt, LiveRegion as m, PrimAccordionContentProps as ma, AvatarGroup as mi, FormNumberInputProps as mn, MenubarContainer$1 as mr, Container as mt, KeyPadMenu as n, EmptyStateAction as na, Composite as ni, FormDateRangePicker as nn, ToolbarSeparator$1 as nr, GroupImperativeHandle as nt, InlineEditProps as o, BreadcrumbProps as oa, CompositeZone as oi, FormField$1 as on, MenuButtonArrow$1 as or, ResizableHandle as ot, THEME_PALETTES as p, AccordionTrigger$1 as pa, Avatar as pi, FormNumberInput as pn, MenuTrigger$1 as pr, SectionProps as pt, PaginationProps as q, CardTitle as qi, StarRating as qn, TabPanelProps$1 as qr, ConditionOperator as qt, KeyPadMenuProps as r, EmptyStateProps as ra, CompositeItem as ri, FormDateRangePickerProps as rn, Tooltip$1 as rr, Layout as rt, ColorPalette as s, StatCard as sa, Meter$1 as si, FormGroup$1 as sn, MenuItem$1 as sr, ResizableHandleProps as st, KeyPadItem as t, EmptyState as ta, DisclosureTrigger$1 as ti, FormControl$1 as tn, ToolbarRoot$1 as tr, LogoProps as tt, ColorPalettePicker as u, AccordionItem$1 as ua, CircularProgressProps as ui, FormIconPickerProps as un, MenuPopover$1 as ur, ResizablePanelGroupProps as ut, Expression as v, ToggleGroup$1 as va, TextareaProps as vi, FormRadioGroup$1 as vn, ComboboxGroupLabel$1 as vr, PageHeader as vt, FacetGroup as w, SeparatorProps$1 as wa, SkeletonText as wi, FormSelectPopover as wn, AlertDialogPanelProps$1 as wr, Radio$1 as wt, ExpressionProps as x, OtpField as xa, SkeletonCard as xi, FormRoot$1 as xn, ComboboxPopover$1 as xr, createBlock as xt, ExpressionGroup as y, ToggleGroupProps$1 as ya, Skeleton as yi, FormRemove$1 as yn, ComboboxInput$1 as yr, PageHeaderProps as yt, ShaderPreset as z, CardContentProps as zi, useFormStore as zn, SelectLabel$1 as zr, PopoverContentProps$1 as zt };
|
package/dist/meta.cjs
CHANGED
|
@@ -532,7 +532,7 @@ const coreMetas = [
|
|
|
532
532
|
name: "onSave",
|
|
533
533
|
type: "(next: string) => boolean | void | Promise<boolean | void>",
|
|
534
534
|
required: true,
|
|
535
|
-
description: "저장. false
|
|
535
|
+
description: "저장. false 반환 또는 Promise 실패 시 입력을 유지하고 오류를 알림"
|
|
536
536
|
},
|
|
537
537
|
{
|
|
538
538
|
name: "as",
|
|
@@ -576,7 +576,7 @@ const coreMetas = [
|
|
|
576
576
|
{
|
|
577
577
|
name: "labels",
|
|
578
578
|
type: "InlineEditLabels",
|
|
579
|
-
description: "
|
|
579
|
+
description: "입력 이름(input), 편집·저장·취소·오류 안내 문자열"
|
|
580
580
|
},
|
|
581
581
|
{
|
|
582
582
|
name: "className",
|
|
@@ -2212,6 +2212,21 @@ export function Example() {
|
|
|
2212
2212
|
}
|
|
2213
2213
|
],
|
|
2214
2214
|
FormSelect: [
|
|
2215
|
+
{
|
|
2216
|
+
name: "id",
|
|
2217
|
+
type: "string",
|
|
2218
|
+
description: "트리거 ID. 외부 FormLabel의 htmlFor와 연결"
|
|
2219
|
+
},
|
|
2220
|
+
{
|
|
2221
|
+
name: "aria-label",
|
|
2222
|
+
type: "string",
|
|
2223
|
+
description: "입력의 접근 가능한 이름"
|
|
2224
|
+
},
|
|
2225
|
+
{
|
|
2226
|
+
name: "aria-describedby",
|
|
2227
|
+
type: "string",
|
|
2228
|
+
description: "설명·오류 요소의 ID 목록"
|
|
2229
|
+
},
|
|
2215
2230
|
{
|
|
2216
2231
|
name: "name",
|
|
2217
2232
|
type: "string",
|
|
@@ -4303,6 +4318,11 @@ export function Example() { return <PopoverRoot><PopoverTrigger>공유 안내</P
|
|
|
4303
4318
|
type: "(value: number) => void",
|
|
4304
4319
|
description: "값 변경 핸들러"
|
|
4305
4320
|
},
|
|
4321
|
+
{
|
|
4322
|
+
name: "onValueCommit",
|
|
4323
|
+
type: "(value: number) => void",
|
|
4324
|
+
description: "포인터·키보드 편집 완료 시 한 번 호출. 취소와 외부 값 갱신은 제외"
|
|
4325
|
+
},
|
|
4306
4326
|
{
|
|
4307
4327
|
name: "min",
|
|
4308
4328
|
type: "number",
|
|
@@ -5665,7 +5685,7 @@ const shellMetas = [
|
|
|
5665
5685
|
description: "폼 필드 정의 배열"
|
|
5666
5686
|
}, {
|
|
5667
5687
|
name: "onSubmit",
|
|
5668
|
-
type: "(values: Record<string, unknown>) => void",
|
|
5688
|
+
type: "(values: Record<string, unknown>) => void | Promise<void>",
|
|
5669
5689
|
description: "제출 핸들러"
|
|
5670
5690
|
}] },
|
|
5671
5691
|
dependencies: [
|
|
@@ -6536,7 +6556,7 @@ const filters = [
|
|
|
6536
6556
|
},
|
|
6537
6557
|
{
|
|
6538
6558
|
name: "onSubmit",
|
|
6539
|
-
type: "(values: { email: string; password: string; confirmPassword?: string; rememberMe?: boolean; mode: \"login\" | \"signup\" }) => void",
|
|
6559
|
+
type: "(values: { email: string; password: string; confirmPassword?: string; rememberMe?: boolean; mode: \"login\" | \"signup\" }) => void | Promise<void>",
|
|
6540
6560
|
description: "제출 핸들러"
|
|
6541
6561
|
},
|
|
6542
6562
|
{
|
|
@@ -6579,7 +6599,7 @@ const filters = [
|
|
|
6579
6599
|
},
|
|
6580
6600
|
{
|
|
6581
6601
|
name: "onSubmit",
|
|
6582
|
-
type: "(values: Record<string, unknown>) => void",
|
|
6602
|
+
type: "(values: Record<string, unknown>) => void | Promise<void>",
|
|
6583
6603
|
description: "제출 핸들러"
|
|
6584
6604
|
},
|
|
6585
6605
|
{
|
|
@@ -6647,7 +6667,7 @@ const filters = [
|
|
|
6647
6667
|
},
|
|
6648
6668
|
{
|
|
6649
6669
|
name: "onSubmit",
|
|
6650
|
-
type: "(values: string[]) => void",
|
|
6670
|
+
type: "(values: string[]) => void | Promise<void>",
|
|
6651
6671
|
description: "제출 핸들러"
|
|
6652
6672
|
},
|
|
6653
6673
|
{
|
|
@@ -6701,7 +6721,7 @@ const filters = [
|
|
|
6701
6721
|
},
|
|
6702
6722
|
{
|
|
6703
6723
|
name: "onSubmit",
|
|
6704
|
-
type: "(values: { title: string; description: string; file: File | null }) => void",
|
|
6724
|
+
type: "(values: { title: string; description: string; file: File | null }) => void | Promise<void>",
|
|
6705
6725
|
description: "제출 핸들러"
|
|
6706
6726
|
},
|
|
6707
6727
|
{
|
|
@@ -11181,6 +11201,426 @@ const messages = [
|
|
|
11181
11201
|
category: "core"
|
|
11182
11202
|
}],
|
|
11183
11203
|
testDescribe: "QueryWorkspace"
|
|
11204
|
+
},
|
|
11205
|
+
{
|
|
11206
|
+
name: "ReplayScrubber",
|
|
11207
|
+
category: "shell",
|
|
11208
|
+
functionalCategory: "data-display",
|
|
11209
|
+
maturity: "beta",
|
|
11210
|
+
keywords: [
|
|
11211
|
+
"replay",
|
|
11212
|
+
"scrubber",
|
|
11213
|
+
"seekbar",
|
|
11214
|
+
"timeline",
|
|
11215
|
+
"session recording",
|
|
11216
|
+
"playhead"
|
|
11217
|
+
],
|
|
11218
|
+
description: "세션 리플레이의 탐색 트랙. 활동/비활성/미로딩 구간, 활동 밀도, 이벤트 마커를 한 플레이헤드 아래에 겹쳐 그리고, 드래그·키보드 탐색이 끝났을 때만 seek을 커밋한다.",
|
|
11219
|
+
slug: "replay-scrubber",
|
|
11220
|
+
exports: ["ReplayScrubber", "groupReplayMarkers"],
|
|
11221
|
+
props: { ReplayScrubber: [
|
|
11222
|
+
{
|
|
11223
|
+
name: "start",
|
|
11224
|
+
type: "number",
|
|
11225
|
+
required: true,
|
|
11226
|
+
description: "재생 가능한 첫 시각(절대값, 보통 epoch ms)"
|
|
11227
|
+
},
|
|
11228
|
+
{
|
|
11229
|
+
name: "end",
|
|
11230
|
+
type: "number",
|
|
11231
|
+
required: true,
|
|
11232
|
+
description: "재생 가능한 마지막 시각"
|
|
11233
|
+
},
|
|
11234
|
+
{
|
|
11235
|
+
name: "position",
|
|
11236
|
+
type: "number",
|
|
11237
|
+
required: true,
|
|
11238
|
+
description: "현재 플레이헤드. [start, end]로 클램프"
|
|
11239
|
+
},
|
|
11240
|
+
{
|
|
11241
|
+
name: "segments",
|
|
11242
|
+
type: "ReplayScrubberSegment[]",
|
|
11243
|
+
description: "활동 분류 구간. active/inactive/gap/buffer"
|
|
11244
|
+
},
|
|
11245
|
+
{
|
|
11246
|
+
name: "buffered",
|
|
11247
|
+
type: "Array<{ start: number; end: number }>",
|
|
11248
|
+
description: "이미 로드된 범위"
|
|
11249
|
+
},
|
|
11250
|
+
{
|
|
11251
|
+
name: "activity",
|
|
11252
|
+
type: "number[]",
|
|
11253
|
+
description: "0..1로 정규화한 활동 밀도 버킷. 로그 스케일 영역으로 그린다"
|
|
11254
|
+
},
|
|
11255
|
+
{
|
|
11256
|
+
name: "markers",
|
|
11257
|
+
type: "ReplayScrubberMarker[]",
|
|
11258
|
+
description: "트랙 위 관심 지점. 가까운 마커는 하나로 합쳐진다"
|
|
11259
|
+
},
|
|
11260
|
+
{
|
|
11261
|
+
name: "onSeek",
|
|
11262
|
+
type: "(time: number) => void",
|
|
11263
|
+
required: true,
|
|
11264
|
+
description: "포인터·키보드 조작이 끝났을 때 한 번 호출"
|
|
11265
|
+
},
|
|
11266
|
+
{
|
|
11267
|
+
name: "onPreview",
|
|
11268
|
+
type: "(time: number | null) => void",
|
|
11269
|
+
description: "드래그·호버 중 미리보기 시각. 비싼 seek에 쓰지 않는다"
|
|
11270
|
+
},
|
|
11271
|
+
{
|
|
11272
|
+
name: "onMarkerSelect",
|
|
11273
|
+
type: "(marker: ReplayScrubberMarker) => void",
|
|
11274
|
+
description: "마커 선택. 생략하면 해당 시각으로 seek"
|
|
11275
|
+
},
|
|
11276
|
+
{
|
|
11277
|
+
name: "formatTime",
|
|
11278
|
+
type: "(time: number) => string",
|
|
11279
|
+
description: "배지와 aria-valuetext 포맷. 기본 start 기준 m:ss"
|
|
11280
|
+
},
|
|
11281
|
+
{
|
|
11282
|
+
name: "stepMs",
|
|
11283
|
+
type: "number",
|
|
11284
|
+
default: "5000",
|
|
11285
|
+
description: "화살표 키 이동량"
|
|
11286
|
+
},
|
|
11287
|
+
{
|
|
11288
|
+
name: "largeStepMs",
|
|
11289
|
+
type: "number",
|
|
11290
|
+
default: "30000",
|
|
11291
|
+
description: "PageUp/PageDown·Shift+화살표 이동량"
|
|
11292
|
+
},
|
|
11293
|
+
{
|
|
11294
|
+
name: "disabled",
|
|
11295
|
+
type: "boolean",
|
|
11296
|
+
default: "false",
|
|
11297
|
+
description: "모든 조작을 비활성화"
|
|
11298
|
+
},
|
|
11299
|
+
{
|
|
11300
|
+
name: "labels",
|
|
11301
|
+
type: "ReplayScrubberLabels",
|
|
11302
|
+
description: "접근성 문구 오버라이드"
|
|
11303
|
+
},
|
|
11304
|
+
{
|
|
11305
|
+
name: "className",
|
|
11306
|
+
type: "string",
|
|
11307
|
+
description: "추가 클래스"
|
|
11308
|
+
}
|
|
11309
|
+
] },
|
|
11310
|
+
usage: {
|
|
11311
|
+
bestPractices: ["onSeek에만 실제 seek을 연결한다. onPreview는 시각 표시용이다.", "segments의 buffer는 '아직 안 옴'이고 gap은 '없음'이다. 플레이어가 기다릴지 건너뛸지가 갈린다."],
|
|
11312
|
+
avoid: ["마커를 수천 개 넘기지 않는다. 우선순위로 100개 안팎으로 추려서 넘긴다."]
|
|
11313
|
+
},
|
|
11314
|
+
testDescribe: "ReplayScrubber",
|
|
11315
|
+
examples: [{
|
|
11316
|
+
title: "구간·마커가 있는 탐색 트랙",
|
|
11317
|
+
code: `import { ReplayScrubber } from "@reopt-ai/opt-ui";
|
|
11318
|
+
|
|
11319
|
+
<ReplayScrubber
|
|
11320
|
+
start={recording.start}
|
|
11321
|
+
end={recording.end}
|
|
11322
|
+
position={playhead}
|
|
11323
|
+
segments={[
|
|
11324
|
+
{ start: recording.start, end: recording.start + 60_000, kind: "active" },
|
|
11325
|
+
{ start: recording.start + 60_000, end: recording.end, kind: "inactive" },
|
|
11326
|
+
]}
|
|
11327
|
+
markers={[{ id: "err", time: errorAt, label: "TypeError", tone: "danger" }]}
|
|
11328
|
+
onSeek={(time) => player.seek(time)}
|
|
11329
|
+
labels={{ track: "녹화 탐색" }}
|
|
11330
|
+
/>`
|
|
11331
|
+
}]
|
|
11332
|
+
},
|
|
11333
|
+
{
|
|
11334
|
+
name: "ReplayTransport",
|
|
11335
|
+
category: "shell",
|
|
11336
|
+
functionalCategory: "actions",
|
|
11337
|
+
maturity: "beta",
|
|
11338
|
+
keywords: [
|
|
11339
|
+
"replay",
|
|
11340
|
+
"transport",
|
|
11341
|
+
"play",
|
|
11342
|
+
"pause",
|
|
11343
|
+
"speed",
|
|
11344
|
+
"skip inactivity",
|
|
11345
|
+
"session recording"
|
|
11346
|
+
],
|
|
11347
|
+
description: "세션 리플레이 재생 컨트롤. 재생/일시정지, 앞뒤 점프, 배속 메뉴, 비활성 건너뛰기 토글, 전체화면, 경과/시계 타임코드 전환을 제공하며 재생 상태는 호스트가 소유한다.",
|
|
11348
|
+
slug: "replay-transport",
|
|
11349
|
+
exports: ["ReplayTransport", "formatReplayElapsed"],
|
|
11350
|
+
props: { ReplayTransport: [
|
|
11351
|
+
{
|
|
11352
|
+
name: "playing",
|
|
11353
|
+
type: "boolean",
|
|
11354
|
+
required: true,
|
|
11355
|
+
description: "재생 중 여부"
|
|
11356
|
+
},
|
|
11357
|
+
{
|
|
11358
|
+
name: "ended",
|
|
11359
|
+
type: "boolean",
|
|
11360
|
+
default: "false",
|
|
11361
|
+
description: "끝에 도달. 재생 버튼이 다시 시작을 제안"
|
|
11362
|
+
},
|
|
11363
|
+
{
|
|
11364
|
+
name: "position",
|
|
11365
|
+
type: "number",
|
|
11366
|
+
required: true,
|
|
11367
|
+
description: "절대 플레이헤드 시각"
|
|
11368
|
+
},
|
|
11369
|
+
{
|
|
11370
|
+
name: "start",
|
|
11371
|
+
type: "number",
|
|
11372
|
+
required: true,
|
|
11373
|
+
description: "녹화 시작 시각(절대값)"
|
|
11374
|
+
},
|
|
11375
|
+
{
|
|
11376
|
+
name: "end",
|
|
11377
|
+
type: "number",
|
|
11378
|
+
required: true,
|
|
11379
|
+
description: "녹화 종료 시각(절대값)"
|
|
11380
|
+
},
|
|
11381
|
+
{
|
|
11382
|
+
name: "onTogglePlay",
|
|
11383
|
+
type: "() => void",
|
|
11384
|
+
required: true,
|
|
11385
|
+
description: "재생/일시정지 토글. ended면 처음부터 다시 시작"
|
|
11386
|
+
},
|
|
11387
|
+
{
|
|
11388
|
+
name: "onSkip",
|
|
11389
|
+
type: "(deltaMs: number) => void",
|
|
11390
|
+
required: true,
|
|
11391
|
+
description: "부호 있는 시간만큼 이동"
|
|
11392
|
+
},
|
|
11393
|
+
{
|
|
11394
|
+
name: "onSkipToStart",
|
|
11395
|
+
type: "() => void",
|
|
11396
|
+
description: "처음으로. 생략하면 버튼 숨김"
|
|
11397
|
+
},
|
|
11398
|
+
{
|
|
11399
|
+
name: "jumpMs",
|
|
11400
|
+
type: "number",
|
|
11401
|
+
default: "10000",
|
|
11402
|
+
description: "앞뒤 점프 버튼 이동량(ms)"
|
|
11403
|
+
},
|
|
11404
|
+
{
|
|
11405
|
+
name: "speed",
|
|
11406
|
+
type: "number",
|
|
11407
|
+
required: true,
|
|
11408
|
+
description: "현재 배속"
|
|
11409
|
+
},
|
|
11410
|
+
{
|
|
11411
|
+
name: "speeds",
|
|
11412
|
+
type: "readonly number[]",
|
|
11413
|
+
default: "[0.5, 1, 1.5, 2, 3, 4, 8, 16]",
|
|
11414
|
+
description: "선택 가능한 배속 목록"
|
|
11415
|
+
},
|
|
11416
|
+
{
|
|
11417
|
+
name: "onSpeedChange",
|
|
11418
|
+
type: "(speed: number) => void",
|
|
11419
|
+
required: true,
|
|
11420
|
+
description: "배속 변경 콜백"
|
|
11421
|
+
},
|
|
11422
|
+
{
|
|
11423
|
+
name: "skipInactive",
|
|
11424
|
+
type: "boolean",
|
|
11425
|
+
required: true,
|
|
11426
|
+
description: "비활성 구간 건너뛰기 여부"
|
|
11427
|
+
},
|
|
11428
|
+
{
|
|
11429
|
+
name: "onSkipInactiveChange",
|
|
11430
|
+
type: "(skip: boolean) => void",
|
|
11431
|
+
required: true,
|
|
11432
|
+
description: "건너뛰기 토글 콜백"
|
|
11433
|
+
},
|
|
11434
|
+
{
|
|
11435
|
+
name: "fullscreen",
|
|
11436
|
+
type: "boolean",
|
|
11437
|
+
description: "전체화면 상태(호스트 소유)"
|
|
11438
|
+
},
|
|
11439
|
+
{
|
|
11440
|
+
name: "onFullscreenChange",
|
|
11441
|
+
type: "(fullscreen: boolean) => void",
|
|
11442
|
+
description: "있으면 전체화면 버튼 표시"
|
|
11443
|
+
},
|
|
11444
|
+
{
|
|
11445
|
+
name: "timecode",
|
|
11446
|
+
type: "\"elapsed\" | \"clock\"",
|
|
11447
|
+
default: "\"elapsed\"",
|
|
11448
|
+
description: "경과 시간 또는 실제 시각 표시 모드"
|
|
11449
|
+
},
|
|
11450
|
+
{
|
|
11451
|
+
name: "onTimecodeChange",
|
|
11452
|
+
type: "(mode: \"elapsed\" | \"clock\") => void",
|
|
11453
|
+
description: "있으면 타임코드를 클릭해 전환"
|
|
11454
|
+
},
|
|
11455
|
+
{
|
|
11456
|
+
name: "formatClock",
|
|
11457
|
+
type: "(time: number) => string",
|
|
11458
|
+
description: "clock 모드 포맷"
|
|
11459
|
+
},
|
|
11460
|
+
{
|
|
11461
|
+
name: "disabled",
|
|
11462
|
+
type: "boolean",
|
|
11463
|
+
default: "false",
|
|
11464
|
+
description: "모든 조작을 비활성화"
|
|
11465
|
+
},
|
|
11466
|
+
{
|
|
11467
|
+
name: "children",
|
|
11468
|
+
type: "ReactNode",
|
|
11469
|
+
description: "오른쪽에 추가 컨트롤"
|
|
11470
|
+
},
|
|
11471
|
+
{
|
|
11472
|
+
name: "labels",
|
|
11473
|
+
type: "ReplayTransportLabels",
|
|
11474
|
+
description: "문구 오버라이드"
|
|
11475
|
+
},
|
|
11476
|
+
{
|
|
11477
|
+
name: "shortcuts",
|
|
11478
|
+
type: "ReplayTransportShortcuts",
|
|
11479
|
+
description: "툴팁에 표시할 단축키"
|
|
11480
|
+
},
|
|
11481
|
+
{
|
|
11482
|
+
name: "className",
|
|
11483
|
+
type: "string",
|
|
11484
|
+
description: "추가 클래스"
|
|
11485
|
+
}
|
|
11486
|
+
] },
|
|
11487
|
+
usage: {
|
|
11488
|
+
bestPractices: ["단축키는 ReplayPlayerLayout의 shortcuts로 묶고, 여기엔 표시용 문자열만 넘긴다.", "clock 타임코드는 로그와 대조할 때 필요하다. 세션의 실제 시각을 넘긴다."],
|
|
11489
|
+
avoid: ["재생 상태를 컴포넌트 안에 두지 않는다. 플레이어 엔진이 단일 소스다."]
|
|
11490
|
+
},
|
|
11491
|
+
testDescribe: "ReplayTransport",
|
|
11492
|
+
examples: [{
|
|
11493
|
+
title: "호스트가 재생 상태를 소유하는 트랜스포트",
|
|
11494
|
+
code: `import { ReplayTransport } from "@reopt-ai/opt-ui";
|
|
11495
|
+
|
|
11496
|
+
<ReplayTransport
|
|
11497
|
+
playing={playing}
|
|
11498
|
+
position={playhead}
|
|
11499
|
+
start={recording.start}
|
|
11500
|
+
end={recording.end}
|
|
11501
|
+
onTogglePlay={() => (playing ? player.pause() : player.play())}
|
|
11502
|
+
onSkip={(delta) => player.seek(playhead + delta)}
|
|
11503
|
+
speed={speed}
|
|
11504
|
+
onSpeedChange={setSpeed}
|
|
11505
|
+
skipInactive={skipInactive}
|
|
11506
|
+
onSkipInactiveChange={setSkipInactive}
|
|
11507
|
+
labels={{ play: "재생", pause: "일시정지" }}
|
|
11508
|
+
/>`
|
|
11509
|
+
}]
|
|
11510
|
+
},
|
|
11511
|
+
{
|
|
11512
|
+
name: "ReplayPlayerLayout",
|
|
11513
|
+
category: "shell",
|
|
11514
|
+
functionalCategory: "layout",
|
|
11515
|
+
maturity: "beta",
|
|
11516
|
+
keywords: [
|
|
11517
|
+
"replay",
|
|
11518
|
+
"player",
|
|
11519
|
+
"layout",
|
|
11520
|
+
"inspector",
|
|
11521
|
+
"fullscreen",
|
|
11522
|
+
"shortcuts",
|
|
11523
|
+
"session recording"
|
|
11524
|
+
],
|
|
11525
|
+
description: "세션 리플레이 플레이어의 프레임. 스테이지·메타 바·컨트롤·리사이즈 가능한 인스펙터를 배치하고, 플레이어 전체의 전체화면과 입력 필드를 피하는 키보드 단축키 범위를 소유한다.",
|
|
11526
|
+
slug: "replay-player-layout",
|
|
11527
|
+
exports: ["ReplayPlayerLayout", "replayShortcutKey"],
|
|
11528
|
+
props: { ReplayPlayerLayout: [
|
|
11529
|
+
{
|
|
11530
|
+
name: "stage",
|
|
11531
|
+
type: "ReactNode",
|
|
11532
|
+
required: true,
|
|
11533
|
+
description: "녹화가 렌더되는 영역(iframe 호스트)"
|
|
11534
|
+
},
|
|
11535
|
+
{
|
|
11536
|
+
name: "meta",
|
|
11537
|
+
type: "ReactNode",
|
|
11538
|
+
description: "스테이지 위 얇은 바: URL, 창, 기기"
|
|
11539
|
+
},
|
|
11540
|
+
{
|
|
11541
|
+
name: "controls",
|
|
11542
|
+
type: "ReactNode",
|
|
11543
|
+
description: "스테이지 아래 트랜스포트와 스크러버"
|
|
11544
|
+
},
|
|
11545
|
+
{
|
|
11546
|
+
name: "inspector",
|
|
11547
|
+
type: "ReactNode",
|
|
11548
|
+
description: "측면 패널. 생략하면 패널 없음"
|
|
11549
|
+
},
|
|
11550
|
+
{
|
|
11551
|
+
name: "inspectorOpen",
|
|
11552
|
+
type: "boolean",
|
|
11553
|
+
default: "true",
|
|
11554
|
+
description: "인스펙터 표시 여부(제어됨)"
|
|
11555
|
+
},
|
|
11556
|
+
{
|
|
11557
|
+
name: "onInspectorOpenChange",
|
|
11558
|
+
type: "(open: boolean) => void",
|
|
11559
|
+
description: "있으면 토글 버튼 표시"
|
|
11560
|
+
},
|
|
11561
|
+
{
|
|
11562
|
+
name: "inspectorSize",
|
|
11563
|
+
type: "number",
|
|
11564
|
+
default: "34",
|
|
11565
|
+
description: "인스펙터 초기 폭(%)"
|
|
11566
|
+
},
|
|
11567
|
+
{
|
|
11568
|
+
name: "layoutId",
|
|
11569
|
+
type: "string",
|
|
11570
|
+
description: "리사이즈 레이아웃 영속 id"
|
|
11571
|
+
},
|
|
11572
|
+
{
|
|
11573
|
+
name: "fullscreen",
|
|
11574
|
+
type: "boolean",
|
|
11575
|
+
default: "false",
|
|
11576
|
+
description: "전체화면 상태(호스트 소유)"
|
|
11577
|
+
},
|
|
11578
|
+
{
|
|
11579
|
+
name: "onFullscreenChange",
|
|
11580
|
+
type: "(fullscreen: boolean) => void",
|
|
11581
|
+
description: "전체화면 변경 콜백. 브라우저가 스스로 나가도 호출된다"
|
|
11582
|
+
},
|
|
11583
|
+
{
|
|
11584
|
+
name: "shortcuts",
|
|
11585
|
+
type: "ReplayShortcutMap",
|
|
11586
|
+
description: "포커스가 안에 있고 입력 필드가 아닐 때만 동작. false를 반환하면 전파"
|
|
11587
|
+
},
|
|
11588
|
+
{
|
|
11589
|
+
name: "overlay",
|
|
11590
|
+
type: "ReactNode",
|
|
11591
|
+
description: "스테이지 위 오버레이: 로딩, 오류, 건너뛰는 중"
|
|
11592
|
+
},
|
|
11593
|
+
{
|
|
11594
|
+
name: "labels",
|
|
11595
|
+
type: "ReplayPlayerLayoutLabels",
|
|
11596
|
+
description: "문구 오버라이드"
|
|
11597
|
+
},
|
|
11598
|
+
{
|
|
11599
|
+
name: "className",
|
|
11600
|
+
type: "string",
|
|
11601
|
+
description: "추가 클래스"
|
|
11602
|
+
}
|
|
11603
|
+
] },
|
|
11604
|
+
usage: {
|
|
11605
|
+
bestPractices: ["단축키 키 이름은 replayShortcutKey가 만든다: space, arrowleft, shift+arrowright, mod+arrowleft, f.", "전체화면 상태는 호스트가 들고, 브라우저가 스스로 나가면 onFullscreenChange(false)로 통지된다."],
|
|
11606
|
+
avoid: ["스테이지 iframe에 직접 requestFullscreen하지 않는다. 컨트롤이 함께 보여야 한다."]
|
|
11607
|
+
},
|
|
11608
|
+
testDescribe: "ReplayPlayerLayout",
|
|
11609
|
+
examples: [{
|
|
11610
|
+
title: "스테이지·컨트롤·인스펙터 배치와 단축키",
|
|
11611
|
+
code: `import { ReplayPlayerLayout } from "@reopt-ai/opt-ui";
|
|
11612
|
+
|
|
11613
|
+
<ReplayPlayerLayout
|
|
11614
|
+
layoutId="replay-player"
|
|
11615
|
+
meta={<span>{currentPath}</span>}
|
|
11616
|
+
stage={<div ref={stageRef} />}
|
|
11617
|
+
controls={<>{scrubber}{transport}</>}
|
|
11618
|
+
inspector={<EventList onSelect={(e) => player.seek(e.time)} />}
|
|
11619
|
+
inspectorOpen={inspectorOpen}
|
|
11620
|
+
onInspectorOpenChange={setInspectorOpen}
|
|
11621
|
+
shortcuts={{ space: togglePlay, arrowleft: () => skip(-10_000), arrowright: () => skip(10_000) }}
|
|
11622
|
+
/>`
|
|
11623
|
+
}]
|
|
11184
11624
|
}
|
|
11185
11625
|
];
|
|
11186
11626
|
//#endregion
|