@wireweave/core 2.3.1 → 2.5.0-beta.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.
@@ -169,6 +169,36 @@ interface ColNode extends BaseNode, CommonProps {
169
169
  scroll?: boolean;
170
170
  children: AnyNode[];
171
171
  }
172
+ /**
173
+ * Stack - Vertical content grouping container
174
+ *
175
+ * Unlike Col which fills available space (flex: 1),
176
+ * Stack only takes up the space needed by its content (flex: 0 0 auto).
177
+ *
178
+ * Use cases:
179
+ * - Grouping form fields vertically
180
+ * - Card content layout
181
+ * - Centering content with justify/align
182
+ */
183
+ interface StackNode extends BaseNode, CommonProps {
184
+ type: 'Stack';
185
+ children: AnyNode[];
186
+ }
187
+ /**
188
+ * Relative - Position children with absolute positioning
189
+ *
190
+ * Creates a position: relative container.
191
+ * First child is the base element, subsequent children are overlaid on top.
192
+ * Child elements can use `anchor` attribute to specify position:
193
+ * - top-left, top-center, top-right
194
+ * - center-left, center, center-right
195
+ * - bottom-left, bottom-center, bottom-right
196
+ */
197
+ interface RelativeNode extends BaseNode, CommonProps {
198
+ type: 'Relative';
199
+ children: AnyNode[];
200
+ }
201
+ type AnchorPosition = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
172
202
  type ShadowValue = 'none' | 'sm' | 'md' | 'lg' | 'xl';
173
203
  interface CardNode extends BaseNode, CommonProps, InteractiveProps {
174
204
  type: 'Card';
@@ -330,6 +360,8 @@ interface BadgeNode extends BaseNode, CommonProps, InteractiveProps {
330
360
  pill?: boolean;
331
361
  icon?: string;
332
362
  size?: BadgeSize;
363
+ /** Anchor position when inside an overlay container */
364
+ anchor?: AnchorPosition;
333
365
  }
334
366
  type IconSizeToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
335
367
  type IconSize = IconSizeToken | number | ValueWithUnit;
@@ -474,8 +506,75 @@ interface BreadcrumbNode extends BaseNode, CommonProps {
474
506
  interface DividerComponentNode extends BaseNode, CommonProps {
475
507
  type: 'Divider';
476
508
  }
509
+ type MarkerColor = 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'orange';
510
+ /**
511
+ * Marker - Number marker for referencing in annotations
512
+ *
513
+ * Displays a numbered circle that can be placed on UI elements.
514
+ * Recommended to use inside `relative` with `anchor` for positioning outside the UI.
515
+ *
516
+ * Example:
517
+ * ```wireframe
518
+ * relative {
519
+ * button "Submit"
520
+ * marker 1 anchor=top-right
521
+ * }
522
+ * ```
523
+ */
524
+ interface MarkerNode extends BaseNode, CommonProps {
525
+ type: 'Marker';
526
+ /** The marker number (1, 2, 3, ...) */
527
+ number: number;
528
+ /** Marker color */
529
+ color?: MarkerColor;
530
+ /** Anchor position when inside a relative container */
531
+ anchor?: AnchorPosition;
532
+ }
533
+ /**
534
+ * Annotations - Documentation panel for screen specifications
535
+ *
536
+ * Container for annotation items that describe UI elements.
537
+ * Visually distinct from wireframe UI with dashed border and different background.
538
+ * Rendered with data-role="documentation" for LLM recognition.
539
+ *
540
+ * Example:
541
+ * ```wireframe
542
+ * annotations title="화면 설명" {
543
+ * item 1 "이메일 입력" { text "유효성 검사 적용" }
544
+ * item 2 "로그인 버튼" { text "OAuth 연동" }
545
+ * }
546
+ * ```
547
+ */
548
+ interface AnnotationsNode extends BaseNode, CommonProps {
549
+ type: 'Annotations';
550
+ /** Panel title (default: "화면 설명" or "Annotations") */
551
+ title?: string;
552
+ children: AnnotationItemNode[];
553
+ }
554
+ /**
555
+ * AnnotationItem - Individual annotation entry
556
+ *
557
+ * Represents a single annotation with a marker number, title, and description content.
558
+ *
559
+ * Example:
560
+ * ```wireframe
561
+ * item 1 "이메일 입력" {
562
+ * text "- 유효성 검사 적용"
563
+ * text "- 최대 255자"
564
+ * }
565
+ * ```
566
+ */
567
+ interface AnnotationItemNode extends BaseNode {
568
+ type: 'AnnotationItem';
569
+ /** The marker number this item references */
570
+ number: number;
571
+ /** Item title */
572
+ title: string;
573
+ /** Description content (Text nodes) */
574
+ children: AnyNode[];
575
+ }
477
576
  type LayoutNode = PageNode | HeaderNode | MainNode | FooterNode | SidebarNode | SectionNode;
478
- type GridNode = RowNode | ColNode;
577
+ type GridNode = RowNode | ColNode | StackNode | RelativeNode;
479
578
  type ContainerComponentNode = CardNode | ModalNode | DrawerNode | AccordionNode;
480
579
  type TextContentNode = TextNode | TitleNode | LinkNode;
481
580
  type InputComponentNode = InputNode | TextareaNode | SelectNode | CheckboxNode | RadioNode | SwitchNode | SliderNode;
@@ -484,9 +583,10 @@ type DataNode = TableNode | ListNode;
484
583
  type FeedbackNode = AlertNode | ToastNode | ProgressNode | SpinnerNode;
485
584
  type OverlayNode = TooltipNode | PopoverNode | DropdownNode;
486
585
  type NavigationNode = NavNode | TabsNode | BreadcrumbNode;
487
- type ContainerNode = LayoutNode | GridNode | ContainerComponentNode | PopoverNode | TooltipNode;
488
- type LeafNode = TextContentNode | InputComponentNode | ButtonNode | DisplayNode | DataNode | FeedbackNode | DropdownNode | NavigationNode | DividerComponentNode;
586
+ type AnnotationNode = MarkerNode | AnnotationsNode | AnnotationItemNode;
587
+ type ContainerNode = LayoutNode | GridNode | ContainerComponentNode | PopoverNode | TooltipNode | AnnotationsNode | AnnotationItemNode;
588
+ type LeafNode = TextContentNode | InputComponentNode | ButtonNode | DisplayNode | DataNode | FeedbackNode | DropdownNode | NavigationNode | DividerComponentNode | MarkerNode;
489
589
  type AnyNode = ContainerNode | LeafNode;
490
- type NodeType = 'Document' | 'Page' | 'Header' | 'Main' | 'Footer' | 'Sidebar' | 'Section' | 'Row' | 'Col' | 'Card' | 'Modal' | 'Drawer' | 'Accordion' | 'Text' | 'Title' | 'Link' | 'Input' | 'Textarea' | 'Select' | 'Checkbox' | 'Radio' | 'Switch' | 'Slider' | 'Button' | 'Image' | 'Placeholder' | 'Avatar' | 'Badge' | 'Icon' | 'Table' | 'List' | 'Alert' | 'Toast' | 'Progress' | 'Spinner' | 'Tooltip' | 'Popover' | 'Dropdown' | 'Nav' | 'Tabs' | 'Breadcrumb' | 'Divider';
590
+ type NodeType = 'Document' | 'Page' | 'Header' | 'Main' | 'Footer' | 'Sidebar' | 'Section' | 'Row' | 'Col' | 'Stack' | 'Relative' | 'Card' | 'Modal' | 'Drawer' | 'Accordion' | 'Text' | 'Title' | 'Link' | 'Input' | 'Textarea' | 'Select' | 'Checkbox' | 'Radio' | 'Switch' | 'Slider' | 'Button' | 'Image' | 'Placeholder' | 'Avatar' | 'Badge' | 'Icon' | 'Table' | 'List' | 'Alert' | 'Toast' | 'Progress' | 'Spinner' | 'Tooltip' | 'Popover' | 'Dropdown' | 'Nav' | 'Tabs' | 'Breadcrumb' | 'Divider' | 'Marker' | 'Annotations' | 'AnnotationItem';
491
591
 
492
- export type { ToastNode as $, AnyNode as A, BadgeNode as B, CardNode as C, DataNode as D, RowNode as E, FeedbackNode as F, GridNode as G, HeaderNode as H, IconNode as I, SelectNode as J, SidebarNode as K, LayoutNode as L, MainNode as M, NavNode as N, OverlayNode as O, PageNode as P, SliderNode as Q, RadioNode as R, SectionNode as S, SpinnerNode as T, SwitchNode as U, TableNode as V, TabsNode as W, TextContentNode as X, TextNode as Y, TextareaNode as Z, TitleNode as _, AccordionNode as a, TooltipNode as a0, WireframeDocument as a1, AlertVariant as a2, AlignValue as a3, AppearanceProps as a4, AvatarSize as a5, AvatarSizeToken as a6, BadgeSize as a7, BadgeSizeToken as a8, BadgeVariant as a9, SelectOption as aA, ShadowValue as aB, SizeProps as aC, SourceLocation as aD, SpacingProps as aE, SpacingValue as aF, SpinnerSize as aG, SpinnerSizeToken as aH, TabNode as aI, TextAlign as aJ, TextSize as aK, TextSizeToken as aL, TextWeight as aM, TitleLevel as aN, ToastPosition as aO, TooltipPosition as aP, ValueWithUnit as aQ, WidthValue as aR, BaseNode as aa, BreadcrumbItem as ab, ButtonSize as ac, ButtonSizeToken as ad, ButtonVariant as ae, CommonProps as af, DirectionValue as ag, DividerNode as ah, DrawerPosition as ai, DropdownItemNode as aj, FlexProps as ak, GridProps as al, HeightValue as am, IconSize as an, IconSizeToken as ao, InputType as ap, InteractiveProps as aq, JustifyValue as ar, ListItemNode as as, NavBlockItem as at, NavChild as au, NavDivider as av, NavGroupNode as aw, NavItem as ax, Position as ay, PositionProps as az, AlertNode as b, AvatarNode as c, BreadcrumbNode as d, ButtonNode as e, CheckboxNode as f, ColNode as g, ContainerComponentNode as h, ContainerNode as i, DisplayNode as j, DividerComponentNode as k, DrawerNode as l, DropdownNode as m, FooterNode as n, ImageNode as o, InputComponentNode as p, InputNode as q, LeafNode as r, LinkNode as s, ListNode as t, ModalNode as u, NavigationNode as v, NodeType as w, PlaceholderNode as x, PopoverNode as y, ProgressNode as z };
592
+ export type { ToastNode as $, AnyNode as A, BadgeNode as B, CardNode as C, DataNode as D, RowNode as E, FeedbackNode as F, GridNode as G, HeaderNode as H, IconNode as I, SelectNode as J, SidebarNode as K, LayoutNode as L, MainNode as M, NavNode as N, OverlayNode as O, PageNode as P, SliderNode as Q, RadioNode as R, SectionNode as S, SpinnerNode as T, SwitchNode as U, TableNode as V, TabsNode as W, TextContentNode as X, TextNode as Y, TextareaNode as Z, TitleNode as _, AccordionNode as a, TooltipNode as a0, WireframeDocument as a1, AlertVariant as a2, AlignValue as a3, AnchorPosition as a4, AnnotationItemNode as a5, AnnotationNode as a6, AnnotationsNode as a7, AppearanceProps as a8, AvatarSize as a9, NavChild as aA, NavDivider as aB, NavGroupNode as aC, NavItem as aD, Position as aE, PositionProps as aF, RelativeNode as aG, SelectOption as aH, ShadowValue as aI, SizeProps as aJ, SourceLocation as aK, SpacingProps as aL, SpacingValue as aM, SpinnerSize as aN, SpinnerSizeToken as aO, StackNode as aP, TabNode as aQ, TextAlign as aR, TextSize as aS, TextSizeToken as aT, TextWeight as aU, TitleLevel as aV, ToastPosition as aW, TooltipPosition as aX, ValueWithUnit as aY, WidthValue as aZ, AvatarSizeToken as aa, BadgeSize as ab, BadgeSizeToken as ac, BadgeVariant as ad, BaseNode as ae, BreadcrumbItem as af, ButtonSize as ag, ButtonSizeToken as ah, ButtonVariant as ai, CommonProps as aj, DirectionValue as ak, DividerNode as al, DrawerPosition as am, DropdownItemNode as an, FlexProps as ao, GridProps as ap, HeightValue as aq, IconSize as ar, IconSizeToken as as, InputType as at, InteractiveProps as au, JustifyValue as av, ListItemNode as aw, MarkerColor as ax, MarkerNode as ay, NavBlockItem as az, AlertNode as b, AvatarNode as c, BreadcrumbNode as d, ButtonNode as e, CheckboxNode as f, ColNode as g, ContainerComponentNode as h, ContainerNode as i, DisplayNode as j, DividerComponentNode as k, DrawerNode as l, DropdownNode as m, FooterNode as n, ImageNode as o, InputComponentNode as p, InputNode as q, LeafNode as r, LinkNode as s, ListNode as t, ModalNode as u, NavigationNode as v, NodeType as w, PlaceholderNode as x, PopoverNode as y, ProgressNode as z };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wireweave/core",
3
- "version": "2.3.1",
3
+ "version": "2.5.0-beta.0",
4
4
  "description": "Core parser and renderer for wireweave",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",