@fewbox/den-web 0.2.0-preview.4 → 0.2.0-preview.41

package/templates/.claude/skills/fewbox-den/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: fewbox-den
-description: Use when writing React UI with the fewbox-den component library. Provides component API reference for layouts (X/Y/S series), views (VLabel, VForm, VInput, etc.), network clients (Fetch, SSE, GraphQL, WebSocket), styling (ColorType, FontSizeType), and common patterns (page layout, forms, cards). Invoke this skill when you see Den.Components imports or need to create UI with fewbox-den.
+description: Use when writing React UI with the fewbox-den component library. Provides component API reference for layouts (X/Y/S series), views (VLabel, VForm, VInput, etc.), network clients (Fetch, SSE, GraphQL, WebSocket), styling (ColorType, FontSizeType), and common patterns (page layout, forms, cards). Invoke this skill when you see fewbox-den imports or need to create UI with fewbox-den.
 allowed-tools: Read, Grep, Glob
 ---
 
@@ -10,26 +10,21 @@ When writing code that uses fewbox-den, follow the patterns and API documented b
 
 ## Import Pattern
 
-All components are accessed through the `Den` namespace:
+All components, enums, and types are named exports:
 
 ```tsx
-import { Den } from '@fewbox/den';          // core variant
-import { Den } from '@fewbox/den-app';      // app variant (includes network/store)
-import { Den } from '@fewbox/den-web';      // web variant
-
-// Components accessed via:
-Den.Components.XCenter
-Den.Components.VLabel
-Den.Components.ColorType   // enums are also under Components
+import { XCenter, VLabel, ColorType } from '@fewbox/den';          // core variant
+import { XCenter, VLabel, GetFetch, boot } from '@fewbox/den-app'; // app variant (includes network/store)
+import { XCenter, VLabel, Debug } from '@fewbox/den-web';          // web variant
 ```
 
 ### Variant Exports
 
-- **core** (`Den.Components`): Layout (X/Y/S/Flex/FlexItem/Position/PositionArea/Dock/BreakpointDisplay/Responsive), View (VBoundary, VLabel, VText, VForm, VActionForm, VInput/*, VSelect, VDropdown, VSwitch, VImage, VSvg, VBackground, VAnimation, VTooltip, VLoading, VErrorBoundary, VShape/*, VHyperlink, VMask, VFrame, VTheme, VHeader/VMain/VFooter, VHR, VSection, VZone, VAudio, VVideo, VShadow), Enums, Types, utilities
-- **web** (`Den.Components`): core + Debug, VGoogleFont, VChromeExtensionValidator, GoogleGrant, GoogleSignin, FigmaSignin, WeComSignin, parseJWT
-- **app** (`Den.Components`): web + VDynamic, VAvatar, VBlock, VCard, VCardMedia, VCardSocial, VCardWindow, VPhoto, VStack, VTree
-- **app** also exports: `Den.FewBox`, `Den.Language`, `Den.Network`, `Den.Store`
-- **append** (no Components): `Den.FewBox`, `Den.Language`, `Den.Network`, `Den.Store`
+- **core** (`@fewbox/den`): Layout (X/Y/S/Flex/FlexItem/Position/PositionArea/Dock/BreakpointDisplay/Responsive), View (VBoundary, VLabel, VText, VForm, VActionForm, VInput/*, VSelect, VDropdown, VSwitch, VTextArea, VImage, VSvg, VBackground, VAnimation, VTooltip, VLoading, VErrorBoundary, VEllipse/VLine/VRectangle, VHyperlink, VMask, VFrame, VTheme, VBadge, VTemplate, VMount, VHeader/VNav/VMain/VAside/VFooter, VHR, VSection, VZone, VAudio, VVideo, VShadow), Enums, Types, utilities
+- **web** (`@fewbox/den-web`): core + Debug, VGoogleFont, VChromeExtensionValidator, GoogleGrant, GoogleSignin, FigmaSignin, WeComSignin, parseJWT
+- **app** (`@fewbox/den-app`): web + VDynamic, VAvatar, VBlock, VCard, VCardMedia, VCardSocial, VCardWindow, VPhoto, VStack, VTree
+- **app** also exports: FewBox (boot, BootClass), Language, Network, Store modules
+- **append** (`@fewbox/den-append`, no UI components): FewBox, Language, Network, Store modules only
 
 ## Core Concepts
 
@@ -41,35 +36,35 @@ All components extend `IBaseProps` (which extends `IViewProps`) providing these
 |------|------|-------------|
 | `className` | `string` | Additional CSS classes |
 | `style` | `CSSProperties` | Inline styles |
-| `fontSize` | `FontSizeType \| string` | Font size preset or custom value |
+| `fontSize` | `FontSizeType \| Property.FontSize` | Font size preset or custom CSS value |
 | `isAutoSize` | `boolean` | Use auto-responsive font size variant |
 | `fontWeight` | `FontWeightType` | Font weight (Thin through Black) |
-| `frontColor` | `ColorType \| string` | Text/foreground color |
-| `backgroundColor` | `ColorType \| string` | Background color |
-| `borderColor` | `ColorType \| string` | Border color |
+| `frontColor` | `ColorType \| Property.Color` | Text/foreground color |
+| `backgroundColor` | `ColorType \| Property.Color` | Background color |
+| `borderColor` | `ColorType \| Property.Color` | Border color |
 | `borderDirection` | `DirectionType` | Which sides get the border |
-| `borderRadius` | `BorderRadiusType \| string` | Border radius preset or custom |
-| `borderStyle` | `BorderStyleType \| string` | Border style preset or custom |
-| `borderWidth` | `BorderWidthType \| string` | Border width preset or custom |
-| `padding` | `PaddingType \| string` | CSS padding (preset or custom) |
-| `margin` | `MarginType \| string` | CSS margin (preset or custom) |
-| `opacity` | `OpacityType` | Opacity preset |
-| `display` | `DisplayType \| string` | CSS display preset or custom |
-| `visibility` | `VisibilityType \| string` | CSS visibility preset or custom |
-| `cursor` | `CursorType \| string` | CSS cursor preset or custom |
-| `overflow` | `OverflowType \| string` | CSS overflow preset or custom |
-| `overflowX` | `OverflowXType \| string` | CSS overflow-x preset or custom |
-| `overflowY` | `OverflowYType \| string` | CSS overflow-y preset or custom |
-| `width` | `string` | CSS width |
-| `height` | `string` | CSS height |
-| `minWidth` | `string` | CSS min-width |
-| `minHeight` | `string` | CSS min-height |
-| `maxWidth` | `string` | CSS max-width |
-| `maxHeight` | `string` | CSS max-height |
-| `zIndex` | `number` | CSS z-index |
-| `fontFamily` | `string` | CSS font-family |
-| `letterSpacing` | `string` | CSS letter-spacing |
-| `lineHeight` | `string` | CSS line-height |
+| `borderRadius` | `BorderRadiusType \| Property.BorderRadius` | Border radius preset or custom |
+| `borderStyle` | `BorderStyleType \| Property.BorderStyle` | Border style preset or custom |
+| `borderWidth` | `BorderWidthType \| Property.BorderWidth` | Border width preset or custom |
+| `padding` | `PaddingType \| Property.Padding` | CSS padding (preset or custom) |
+| `margin` | `MarginType \| Property.Margin` | CSS margin (preset or custom) |
+| `opacity` | `OpacityType \| Property.Opacity` | Opacity preset or custom CSS value |
+| `display` | `DisplayType \| Property.Display` | CSS display preset or custom |
+| `visibility` | `VisibilityType \| Property.Visibility` | CSS visibility preset or custom |
+| `cursor` | `CursorType \| Property.Cursor` | CSS cursor preset or custom |
+| `overflow` | `OverflowType \| Property.Overflow` | CSS overflow preset or custom |
+| `overflowX` | `OverflowXType \| Property.OverflowX` | CSS overflow-x preset or custom |
+| `overflowY` | `OverflowYType \| Property.OverflowY` | CSS overflow-y preset or custom |
+| `width` | `Property.Width` | CSS width |
+| `height` | `Property.Height` | CSS height |
+| `minWidth` | `Property.Width` | CSS min-width |
+| `minHeight` | `Property.Width` | CSS min-height |
+| `maxWidth` | `Property.Width` | CSS max-width |
+| `maxHeight` | `Property.Width` | CSS max-height |
+| `zIndex` | `Property.ZIndex` | CSS z-index |
+| `fontFamily` | `Property.FontFamily` | CSS font-family |
+| `letterSpacing` | `LetterSpacingType \| Property.LetterSpacing` | Letter spacing preset or custom CSS value |
+| `lineHeight` | `Property.LineHeight` | CSS line-height |
 | `selfShrink` | `number` | flex-shrink for the component itself |
 | `selfGrow` | `number` | flex-grow for the component itself |
 | `selfBasis` | `string` | flex-basis for the component itself |
@@ -146,7 +141,7 @@ FontWeightType.Black         // 900
 
 ### Preset Enums (class-based styling)
 
-These enums generate CSS classes. Pass enum value or a custom string (generates `{prefix}-{value}` class):
+These enums generate CSS classes. All `Full*Type` props accept either a preset enum value (applied as className) or a custom CSS value from `csstype` `Property.*` (applied as inline style):
 
 ```tsx
 // Border Radius
@@ -167,6 +162,9 @@ MarginType.Default | .Normal | .ExtraSmall | .Small | .Large | .ExtraLarge
 // Gap (for layout components)
 GapType.Default | .Normal | .ExtraSmall | .Small | .Large | .ExtraLarge
 
+// Letter Spacing
+LetterSpacingType.Default | .Normal | .ExtraSmall | .Small | .Large | .ExtraLarge
+
 // Opacity
 OpacityType._0 | ._10 | ._20 | ._25 | ._30 | ._40 | ._50 | ._60 | ._70 | ._75 | ._80 | ._90 | ._100
 
@@ -193,53 +191,53 @@ All X-series components accept `gap`, `cross`, `itemsShrink` props in addition t
 
 ```tsx
 // Basic horizontal layout (default: justify-content: flex-start)
-<Den.Components.X gap="1em">
+<X gap="1em">
   <Child1 /> <Child2 /> <Child3 />
-</Den.Components.X>
+</X>
 
 // Justify-content variants:
-<Den.Components.XLeft>...</Den.Components.XLeft>          // flex-start
-<Den.Components.XCenter>...</Den.Components.XCenter>      // center
-<Den.Components.XRight>...</Den.Components.XRight>        // flex-end
-<Den.Components.XBetween>...</Den.Components.XBetween>    // space-between
-<Den.Components.XAround>...</Den.Components.XAround>      // space-around
-<Den.Components.XEvenly>...</Den.Components.XEvenly>      // space-evenly
+<XLeft>...</XLeft>          // flex-start
+<XCenter>...</XCenter>      // center
+<XRight>...</XRight>        // flex-end
+<XBetween>...</XBetween>    // space-between
+<XAround>...</XAround>      // space-around
+<XEvenly>...</XEvenly>      // space-evenly
 
 // Auto-margin variants (margin-based centering):
-<Den.Components.XAutoLeft>...</Den.Components.XAutoLeft>      // first child margin-right: auto
-<Den.Components.XAutoCenter>...</Den.Components.XAutoCenter>  // center child with auto margins
-<Den.Components.XAutoRight>...</Den.Components.XAutoRight>    // last child margin-left: auto
-<Den.Components.XAutoLefts>...</Den.Components.XAutoLefts>    // all items margin-right: auto
-<Den.Components.XAutoRights>...</Den.Components.XAutoRights>  // all items margin-left: auto
-<Den.Components.XAutoBoth>...</Den.Components.XAutoBoth>      // first and last with auto margins
+<XAutoLeft>...</XAutoLeft>      // first child margin-right: auto
+<XAutoCenter>...</XAutoCenter>  // center child with auto margins
+<XAutoRight>...</XAutoRight>    // last child margin-left: auto
+<XAutoLefts>...</XAutoLefts>    // all items margin-right: auto
+<XAutoRights>...</XAutoRights>  // all items margin-left: auto
+<XAutoBoth>...</XAutoBoth>      // first and last with auto margins
 
 // Custom flex-basis distribution:
-<Den.Components.XCustom basises={['20%', '30%', '50%']}>
+<XCustom basises={['20%', '30%', '50%']}>
   <Child1 /> <Child2 /> <Child3 />
-</Den.Components.XCustom>
+</XCustom>
 
 // Uniform flex-basis with auto-margin sides:
-<Den.Components.XCustomBoth basis="10%">
+<XCustomBoth basis="10%">
   <Child1 /> <Child2 /> <Child3 />
-</Den.Components.XCustomBoth>
+</XCustomBoth>
 
 // Wrap variants (flex-wrap: wrap with align-content):
-<Den.Components.XWrapTop>...</Den.Components.XWrapTop>          // align-content: flex-start
-<Den.Components.XWrapMiddle>...</Den.Components.XWrapMiddle>    // align-content: center
-<Den.Components.XWrapBottom>...</Den.Components.XWrapBottom>    // align-content: flex-end
-<Den.Components.XWrapAround>...</Den.Components.XWrapAround>    // align-content: space-around
-<Den.Components.XWrapBetween>...</Den.Components.XWrapBetween>  // align-content: space-between
-<Den.Components.XWrapEvenly>...</Den.Components.XWrapEvenly>    // align-content: space-evenly
+<XWrapTop>...</XWrapTop>          // align-content: flex-start
+<XWrapMiddle>...</XWrapMiddle>    // align-content: center
+<XWrapBottom>...</XWrapBottom>    // align-content: flex-end
+<XWrapAround>...</XWrapAround>    // align-content: space-around
+<XWrapBetween>...</XWrapBetween>  // align-content: space-between
+<XWrapEvenly>...</XWrapEvenly>    // align-content: space-evenly
 ```
 
 **Cross-axis alignment** (align-items) via the `cross` prop on X components:
 
 ```tsx
-<Den.Components.X cross={Den.Components.XCrossType.Top}>       // align-items: flex-start
-<Den.Components.X cross={Den.Components.XCrossType.Middle}>    // align-items: center
-<Den.Components.X cross={Den.Components.XCrossType.Bottom}>    // align-items: flex-end
-<Den.Components.X cross={Den.Components.XCrossType.Stretch}>   // align-items: stretch
-<Den.Components.X cross={Den.Components.XCrossType.Baseline}>  // align-items: baseline
+<X cross={XCrossType.Top}>       // align-items: flex-start
+<X cross={XCrossType.Middle}>    // align-items: center
+<X cross={XCrossType.Bottom}>    // align-items: flex-end
+<X cross={XCrossType.Stretch}>   // align-items: stretch
+<X cross={XCrossType.Baseline}>  // align-items: baseline
 ```
 
 ### Y-Series (Vertical Layout, flex-direction: column)
@@ -247,43 +245,43 @@ All X-series components accept `gap`, `cross`, `itemsShrink` props in addition t
 Mirrors X-series but vertically:
 
 ```tsx
-<Den.Components.Y gap="1em">...</Den.Components.Y>                // default
-<Den.Components.YTop>...</Den.Components.YTop>                    // justify-content: flex-start
-<Den.Components.YMiddle>...</Den.Components.YMiddle>              // justify-content: center
-<Den.Components.YBottom>...</Den.Components.YBottom>              // justify-content: flex-end
-<Den.Components.YBetween>...</Den.Components.YBetween>            // space-between
-<Den.Components.YAround>...</Den.Components.YAround>              // space-around
-<Den.Components.YEvenly>...</Den.Components.YEvenly>              // space-evenly
+<Y gap="1em">...</Y>                // default
+<YTop>...</YTop>                    // justify-content: flex-start
+<YMiddle>...</YMiddle>              // justify-content: center
+<YBottom>...</YBottom>              // justify-content: flex-end
+<YBetween>...</YBetween>            // space-between
+<YAround>...</YAround>              // space-around
+<YEvenly>...</YEvenly>              // space-evenly
 
 // Auto-margin variants:
-<Den.Components.YAutoTop>...</Den.Components.YAutoTop>
-<Den.Components.YAutoCenter>...</Den.Components.YAutoCenter>
-<Den.Components.YAutoBottom>...</Den.Components.YAutoBottom>
-<Den.Components.YAutoTops>...</Den.Components.YAutoTops>
-<Den.Components.YAutoBottoms>...</Den.Components.YAutoBottoms>
-<Den.Components.YAutoBoth>...</Den.Components.YAutoBoth>
+<YAutoTop>...</YAutoTop>
+<YAutoCenter>...</YAutoCenter>
+<YAutoBottom>...</YAutoBottom>
+<YAutoTops>...</YAutoTops>
+<YAutoBottoms>...</YAutoBottoms>
+<YAutoBoth>...</YAutoBoth>
 
 // Custom:
-<Den.Components.YCustom basises={['auto', '1fr', 'auto']}>...</Den.Components.YCustom>
-<Den.Components.YCustomBoth basis="10%">...</Den.Components.YCustomBoth>
+<YCustom basises={['auto', '1fr', 'auto']}>...</YCustom>
+<YCustomBoth basis="10%">...</YCustomBoth>
 
 // Wrap variants:
-<Den.Components.YWrapLeft>...</Den.Components.YWrapLeft>
-<Den.Components.YWrapCenter>...</Den.Components.YWrapCenter>
-<Den.Components.YWrapRight>...</Den.Components.YWrapRight>
-<Den.Components.YWrapAround>...</Den.Components.YWrapAround>
-<Den.Components.YWrapBetween>...</Den.Components.YWrapBetween>
-<Den.Components.YWrapEvenly>...</Den.Components.YWrapEvenly>
+<YWrapLeft>...</YWrapLeft>
+<YWrapCenter>...</YWrapCenter>
+<YWrapRight>...</YWrapRight>
+<YWrapAround>...</YWrapAround>
+<YWrapBetween>...</YWrapBetween>
+<YWrapEvenly>...</YWrapEvenly>
 ```
 
 **Cross-axis alignment** (align-items) via the `cross` prop on Y components:
 
 ```tsx
-<Den.Components.Y cross={Den.Components.YCrossType.Left}>       // align-items: flex-start
-<Den.Components.Y cross={Den.Components.YCrossType.Center}>     // align-items: center
-<Den.Components.Y cross={Den.Components.YCrossType.Right}>      // align-items: flex-end
-<Den.Components.Y cross={Den.Components.YCrossType.Stretch}>    // align-items: stretch
-<Den.Components.Y cross={Den.Components.YCrossType.Baseline}>   // align-items: baseline
+<Y cross={YCrossType.Left}>       // align-items: flex-start
+<Y cross={YCrossType.Center}>     // align-items: center
+<Y cross={YCrossType.Right}>      // align-items: flex-end
+<Y cross={YCrossType.Stretch}>    // align-items: stretch
+<Y cross={YCrossType.Baseline}>   // align-items: baseline
 ```
 
 ### S-Series (Individual Item Cross-axis Override)
@@ -291,36 +289,36 @@ Mirrors X-series but vertically:
 Wrap a child in an S-component to override the parent's cross-axis alignment for that child only:
 
 ```tsx
-<Den.Components.XCenter cross={Den.Components.XCrossType.Bottom} height="6em">
+<XCenter cross={XCrossType.Bottom} height="6em">
   <Child1 />     {/* aligned to bottom */}
   <Child2 />     {/* aligned to bottom */}
-  <Den.Components.STop>
+  <STop>
     <Child3 />   {/* overridden to top */}
-  </Den.Components.STop>
-</Den.Components.XCenter>
+  </STop>
+</XCenter>
 
 // Available S-components:
-<Den.Components.STop>...</Den.Components.STop>          // align-self: flex-start
-<Den.Components.SMiddle>...</Den.Components.SMiddle>    // align-self: center
-<Den.Components.SBottom>...</Den.Components.SBottom>    // align-self: flex-end
-<Den.Components.SLeft>...</Den.Components.SLeft>        // align-self: flex-start (in Y container)
-<Den.Components.SCenter>...</Den.Components.SCenter>    // align-self: center (in Y container)
-<Den.Components.SRight>...</Den.Components.SRight>      // align-self: flex-end (in Y container)
-<Den.Components.SStretch>...</Den.Components.SStretch>  // align-self: stretch
-<Den.Components.SBaseline>...</Den.Components.SBaseline>// align-self: baseline
+<STop>...</STop>          // align-self: flex-start
+<SMiddle>...</SMiddle>    // align-self: center
+<SBottom>...</SBottom>    // align-self: flex-end
+<SLeft>...</SLeft>        // align-self: flex-start (in Y container)
+<SCenter>...</SCenter>    // align-self: center (in Y container)
+<SRight>...</SRight>      // align-self: flex-end (in Y container)
+<SStretch>...</SStretch>  // align-self: stretch
+<SBaseline>...</SBaseline>// align-self: baseline
 ```
 
 ### Position & PositionArea
 
 ```tsx
 // PositionArea establishes a positioning context (position: relative) on its child.
-<Den.Components.PositionArea category={Den.Components.PositionAreaCategory.FullSize}>
-  <Den.Components.VBoundary height="250px" backgroundColor={Den.Components.ColorType.Dark}>
-    <Den.Components.Position category={Den.Components.PositionCategory.Area} type={Den.Components.PositionType.Center}>
+<PositionArea category={PositionAreaCategory.FullSize}>
+  <VBoundary height="250px" backgroundColor={ColorType.Dark}>
+    <Position category={PositionCategory.Area} type={PositionType.Center}>
       <Content />
-    </Den.Components.Position>
-  </Den.Components.VBoundary>
-</Den.Components.PositionArea>
+    </Position>
+  </VBoundary>
+</PositionArea>
 
 // PositionAreaCategory:
 // Default = inline-block container
@@ -336,14 +334,14 @@ Wrap a child in an S-component to override the parent's cross-axis alignment for
 // Top, Right, Bottom, Left, LeftTop, RightTop, LeftBottom, RightBottom, Center
 
 // Custom positioning (omit type, set top/right/bottom/left):
-<Den.Components.Position category={Den.Components.PositionCategory.Area} top="20px" left="30px">
+<Position category={PositionCategory.Area} top="20px" left="30px">
   <Content />
-</Den.Components.Position>
+</Position>
 
 // Sticky navbar example:
-<Den.Components.Position category={Den.Components.PositionCategory.Edge} top="0px" isFullWidth zIndex={10}>
+<Position category={PositionCategory.Edge} top="0px" isFullWidth zIndex={10}>
   <NavBar />
-</Den.Components.Position>
+</Position>
 
 // Position props: category (required), type, top, right, bottom, left, zIndex, isFullWidth
 ```
@@ -353,13 +351,13 @@ Wrap a child in an S-component to override the parent's cross-axis alignment for
 ```tsx
 // Dock positions an overlay relative to its children.
 // renderOverlay is REQUIRED — returns the overlay element.
-<Den.Components.Dock
-  category={Den.Components.DockCategory.Top}
+<Dock
+  category={DockCategory.Top}
   offset={4}
   renderOverlay={() => <div>Tooltip above</div>}
 >
   <button>Hover me</button>
-</Den.Components.Dock>
+</Dock>
 
 // DockCategory:
 // Top, Right, Bottom, Left
@@ -370,15 +368,33 @@ Wrap a child in an S-component to override the parent's cross-axis alignment for
 // DockAlignment (only for corner categories like LeftTop, RightTop, etc.):
 // Horizontal, Vertical
 
+// DockPopoverMode (controls overlay visibility behavior):
+// Manual  — overlay visibility controlled by isOverlayVisible prop
+// Auto    — overlay uses CSS Anchor Positioning with browser popover API
+
 // Corner with alignment:
-<Den.Components.Dock
-  category={Den.Components.DockCategory.LeftTop}
-  alignment={Den.Components.DockAlignment.Horizontal}
+<Dock
+  category={DockCategory.LeftTop}
+  alignment={DockAlignment.Horizontal}
   offset={4}
   renderOverlay={() => <DropdownMenu />}
 >
   <TriggerButton />
-</Den.Components.Dock>
+</Dock>
+
+// With popover mode and visibility control:
+<Dock
+  category={DockCategory.Bottom}
+  offset={4}
+  isOverlayVisible={isOpen}
+  popoverMode={DockPopoverMode.Manual}
+  overlayZIndex={9999}
+  isPortal={false}
+  onOverlayClose={() => setIsOpen(false)}
+  renderOverlay={() => <DropdownContent />}
+>
+  <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
+</Dock>
 ```
 
 ### BreakpointDisplay (Responsive Show/Hide)
@@ -391,40 +407,40 @@ Wrap a child in an S-component to override the parent's cross-axis alignment for
 // ScreenSizeType: ExtraSmall, Small, Medium, Large, ExtraLarge, ExtraExtraLarge
 
 // Always visible
-<Den.Components.BreakpointDisplay category={Den.Components.BreakpointCategory.Visible}>
+<BreakpointDisplay category={BreakpointCategory.Visible}>
   <div>Always shown</div>
-</Den.Components.BreakpointDisplay>
+</BreakpointDisplay>
 
 // Always hidden
-<Den.Components.BreakpointDisplay category={Den.Components.BreakpointCategory.Hidden}>
+<BreakpointDisplay category={BreakpointCategory.Hidden}>
   <div>Always hidden</div>
-</Den.Components.BreakpointDisplay>
+</BreakpointDisplay>
 
 // Responsive: visible only on Medium breakpoint
-<Den.Components.BreakpointDisplay
-  category={Den.Components.BreakpointCategory.Visible}
-  type={Den.Components.BreakpointType.Only}
-  breakpoint={Den.Components.ScreenSizeType.Medium}
+<BreakpointDisplay
+  category={BreakpointCategory.Visible}
+  type={BreakpointType.Only}
+  breakpoint={ScreenSizeType.Medium}
 >
   <div>Medium only</div>
-</Den.Components.BreakpointDisplay>
+</BreakpointDisplay>
 
 // Hidden on Small and below
-<Den.Components.BreakpointDisplay
-  category={Den.Components.BreakpointCategory.Hidden}
-  type={Den.Components.BreakpointType.Down}
-  breakpoint={Den.Components.ScreenSizeType.Small}
+<BreakpointDisplay
+  category={BreakpointCategory.Hidden}
+  type={BreakpointType.Down}
+  breakpoint={ScreenSizeType.Small}
 >
   <div>Hidden on mobile</div>
-</Den.Components.BreakpointDisplay>
+</BreakpointDisplay>
 
 // Multiple breakpoints (array):
-<Den.Components.BreakpointDisplay
-  category={Den.Components.BreakpointCategory.Visible}
-  breakpoint={[Den.Components.ScreenSizeType.Small, Den.Components.ScreenSizeType.Large]}
+<BreakpointDisplay
+  category={BreakpointCategory.Visible}
+  breakpoint={[ScreenSizeType.Small, ScreenSizeType.Large]}
 >
   <div>Visible on Small and Large</div>
-</Den.Components.BreakpointDisplay>
+</BreakpointDisplay>
 ```
 
 ### Responsive (Desktop/Mobile Switch)
@@ -432,8 +448,8 @@ Wrap a child in an S-component to override the parent's cross-axis alignment for
 ```tsx
 // Shorthand for showing desktop or mobile content based on breakpoint.
 // Children must accept className prop (uses BreakpointDisplay internally).
-<Den.Components.Responsive
-  breakpointType={Den.Components.ScreenSizeType.Medium}
+<Responsive
+  breakpointType={ScreenSizeType.Medium}
   desktop={<div>Desktop layout</div>}
   mobile={<div>Mobile layout</div>}
 />
@@ -445,9 +461,9 @@ Wrap a child in an S-component to override the parent's cross-axis alignment for
 // Like Bootstrap's Container — constrains max-width and centers content.
 // Category controls at which breakpoint max-width starts applying.
 // Below the breakpoint: full width. Above: max-width grows per tier.
-<Den.Components.VZone category={Den.Components.ZoneCategory.Small} padding="1em">
+<VZone category={ZoneCategory.Small} padding="1em">
   <Content />
-</Den.Components.VZone>
+</VZone>
 
 // ZoneCategory:
 // Fluid          — always 100%, no max-width
@@ -462,20 +478,20 @@ Wrap a child in an S-component to override the parent's cross-axis alignment for
 
 ```tsx
 // Flex — full flexbox control
-<Den.Components.Flex
-  direction={Den.Components.FlexDirectionType.Row}
-  wrap={Den.Components.FlexWrapType.Wrap}
-  justifyContent={Den.Components.FlexJustifyContentType.SpaceBetween}
-  alignItems={Den.Components.FlexAlignItemsType.Center}
+<Flex
+  direction={FlexDirectionType.Row}
+  wrap={FlexWrapType.Wrap}
+  justifyContent={FlexJustifyContentType.SpaceBetween}
+  alignItems={FlexAlignItemsType.Center}
   gap="1em"
 >
   ...
-</Den.Components.Flex>
+</Flex>
 
 // FlexItem — wraps a child with flex item properties
-<Den.Components.FlexItem grow={1} shrink={0} basis="200px" order={2}>
+<FlexItem grow={1} shrink={0} basis="200px" order={2}>
   <Content />
-</Den.Components.FlexItem>
+</FlexItem>
 
 // FlexItem also exports FlexItemAlignSelfType
 // Flex also exports FlexAlignContentType
@@ -490,14 +506,14 @@ Wrap a child in an S-component to override the parent's cross-axis alignment for
 The basic div wrapper. Use as a general-purpose container:
 
 ```tsx
-<Den.Components.VBoundary
+<VBoundary
   padding="1em"
-  backgroundColor={Den.Components.ColorType.Light}
-  borderRadius={Den.Components.BorderRadiusType.Default}
+  backgroundColor={ColorType.Light}
+  borderRadius={BorderRadiusType.Default}
   width="100%"
 >
   <Content />
-</Den.Components.VBoundary>
+</VBoundary>
 ```
 
 ### VLabel (Text/Label)
@@ -506,49 +522,61 @@ For inline text. Renders as `<span>` by default, configurable to any inline/head
 
 ```tsx
 // Basic label
-<Den.Components.VLabel caption="Hello World" />
+<VLabel caption="Hello World" />
 
 // With heading category
-<Den.Components.VLabel
-  category={Den.Components.LabelCategory.H1}
+<VLabel
+  category={LabelCategory.H1}
   caption="Page Title"
 />
 
 // Styled label
-<Den.Components.VLabel
-  fontSize={Den.Components.FontSizeType.Large}
-  fontWeight={Den.Components.FontWeightType.Bold}
-  frontColor={Den.Components.ColorType.Primary}
+<VLabel
+  fontSize={FontSizeType.Large}
+  fontWeight={FontWeightType.Bold}
+  frontColor={ColorType.Primary}
   caption="Important Text"
 />
 
 // Circle label (badge)
-<Den.Components.VLabel
-  type={Den.Components.LabelType.Circle}
-  frontColor={Den.Components.ColorType.White}
-  backgroundColor={Den.Components.ColorType.Black}
+<VLabel
+  type={LabelType.Circle}
+  frontColor={ColorType.White}
+  backgroundColor={ColorType.Black}
   caption="X"
 />
 
 // Text overflow (ellipsis)
-<Den.Components.VLabel
+<VLabel
   isTextOverflow
   width="12em"
   caption="This very long text will be truncated with ellipsis..."
 />
 
 // Alignment
-<Den.Components.VLabel
-  alignType={Den.Components.LabelAlignType.Center}
+<VLabel
+  alignType={LabelAlignType.Center}
   caption="Centered text"
 />
 
 // i18n with React Intl
-<Den.Components.VLabel caption={<FormattedMessage id="Label.Hello" />} />
+<VLabel caption={<FormattedMessage id="Label.Hello" />} />
 
 // Available categories:
 // LabelCategory.Div, Span, H1-H6, Abbr, Strong, Em, Code, Pre,
 // Blockquote, Mark, Del, Ins, Small, Sub, Sup, etc.
+
+// fontWeight/fontSize with heading categories (H1-H6):
+// When fontWeight or fontSize is set, VLabel adds CSS classes
+// (.v-label-inherit-font-weight / .v-label-inherit-font-size)
+// that apply `inherit` to the inner heading element, overriding
+// browser defaults. Without these props, headings keep their
+// browser default styles (e.g., H1 is bold and 2em).
+<VLabel
+  category={LabelCategory.H1}
+  fontWeight={FontWeightType.Thin}
+  caption="Thin H1"
+/>
 ```
 
 ### VText (Block Text)
@@ -556,13 +584,13 @@ For inline text. Renders as `<span>` by default, configurable to any inline/head
 For block-level text (p, article, section, etc.):
 
 ```tsx
-<Den.Components.VText
-  category={Den.Components.TextCategory.P}
+<VText
+  category={TextCategory.P}
   caption="Paragraph text content."
 />
 
-<Den.Components.VText
-  alignType={Den.Components.TextAlignType.Center}
+<VText
+  alignType={TextAlignType.Center}
   renderContent={() => <span>Complex <strong>content</strong></span>}
 />
 ```
@@ -571,20 +599,20 @@ For block-level text (p, article, section, etc.):
 
 ```tsx
 // Renders an <a> tag. Requires category and to props.
-<Den.Components.VHyperlink
-  category={Den.Components.HyperlinkCategory.Self}
+<VHyperlink
+  category={HyperlinkCategory.Self}
   to="/about"
 >
   Click me
-</Den.Components.VHyperlink>
+</VHyperlink>
 
 // Open in new window
-<Den.Components.VHyperlink
-  category={Den.Components.HyperlinkCategory.NewWindow}
+<VHyperlink
+  category={HyperlinkCategory.NewWindow}
   to="https://example.com"
 >
   External link
-</Den.Components.VHyperlink>
+</VHyperlink>
 
 // HyperlinkCategory: NewWindow (_blank), Self (_self), Parent (_parent), Top (_top)
 ```
@@ -594,7 +622,7 @@ For block-level text (p, article, section, etc.):
 #### VForm (Form Container)
 
 ```tsx
-<Den.Components.VForm
+<VForm
   handleSubmit={(data) => {
     // data is automatically converted from FormData to nested JSON
     // e.g., { form: { username: "value", password: "value" } }
@@ -606,21 +634,21 @@ For block-level text (p, article, section, etc.):
     invalidInputs[0]?.focus();
   }}
 >
-  <Den.Components.Y gap="0.5em">
-    <Den.Components.VTextBox name="form.username" placeholder="Username" />
-    <Den.Components.VPassword name="form.password" placeholder="Password" />
-    <Den.Components.VSubmit caption="Submit" />
-  </Den.Components.Y>
-</Den.Components.VForm>
+  <Y gap="0.5em">
+    <VTextBox name="form.username" placeholder="Username" />
+    <VPassword name="form.password" placeholder="Password" />
+    <VSubmit caption="Submit" />
+  </Y>
+</VForm>
 
 // HandleSubmitCategory: Json (default), FormData
 // Use FormData category to receive raw FormData instead of parsed JSON:
-<Den.Components.VForm
-  handleSubmitCategory={Den.Components.HandleSubmitCategory.FormData}
+<VForm
+  handleSubmitCategory={HandleSubmitCategory.FormData}
   handleSubmit={(formData) => { /* formData is FormData */ }}
 >
   ...
-</Den.Components.VForm>
+</VForm>
 ```
 
 #### VActionForm (Simple Form)
@@ -628,10 +656,10 @@ For block-level text (p, article, section, etc.):
 A simple `<form>` wrapper without JSON conversion or validation handling:
 
 ```tsx
-<Den.Components.VActionForm action="/api/submit" method="POST">
+<VActionForm action="/api/submit" method="POST">
   <input name="field" />
   <button type="submit">Submit</button>
-</Den.Components.VActionForm>
+</VActionForm>
 ```
 
 **Form data naming conventions:**
@@ -643,7 +671,7 @@ A simple `<form>` wrapper without JSON conversion or validation handling:
 
 ```tsx
 // Text input
-<Den.Components.VTextBox
+<VTextBox
   name="form.name"
   placeholder="Enter name"
   label="Name"                    // Floating label
@@ -655,70 +683,70 @@ A simple `<form>` wrapper without JSON conversion or validation handling:
 
 // Controlled input with hooks
 const [value, setValue] = useState('');
-<Den.Components.VTextBox
+<VTextBox
   name="form.search"
   valueHook={value}
   setStateHook={setValue}
 />
 
 // With suffix options
-<Den.Components.VTextBox
+<VTextBox
   renderOptions={(inputRef) => (
-    <Den.Components.VSvg onClick={() => alert(inputRef.current?.value)}>
+    <VSvg onClick={() => alert(inputRef.current?.value)}>
       <SearchIcon />
-    </Den.Components.VSvg>
+    </VSvg>
   )}
 />
 
 // Other input types:
-<Den.Components.VEmail name="form.email" required placeholder="Email" />
-<Den.Components.VPassword name="form.password" placeholder="Password" />
-<Den.Components.VNumber name="form.count" min={0} max={100} />
-<Den.Components.VDate name="form.date" />
-<Den.Components.VDatetimeLocal name="form.datetime" />
-<Den.Components.VTime name="form.time" />
-<Den.Components.VMonth name="form.month" />
-<Den.Components.VWeek name="form.week" />
-<Den.Components.VColor name="form.color" />
-<Den.Components.VTel name="form.phone" />
-<Den.Components.VUrl name="form.website" />
-<Den.Components.VSearch name="form.search" />
-<Den.Components.VRange name="form.volume" min={0} max={100} />
+<VEmail name="form.email" required placeholder="Email" />
+<VPassword name="form.password" placeholder="Password" />
+<VNumber name="form.count" min={0} max={100} />
+<VDate name="form.date" />
+<VDatetimeLocal name="form.datetime" />
+<VTime name="form.time" />
+<VMonth name="form.month" />
+<VWeek name="form.week" />
+<VColor name="form.color" />
+<VTel name="form.phone" />
+<VUrl name="form.website" />
+<VSearch name="form.search" />
+<VRange name="form.volume" min={0} max={100} />
 
 // TextArea
-<Den.Components.VTextArea name="form.bio" rows={6} placeholder="Bio" />
+<VTextArea name="form.bio" rows={6} placeholder="Bio" />
 
 // Checkbox
-<Den.Components.VCheckBox
+<VCheckBox
   id="form.agree"
   name="form.agree"
   label="I agree"
   isChecked={true}
-  frontColor={Den.Components.ColorType.Primary}
+  frontColor={ColorType.Primary}
 />
 
 // Radio
-<Den.Components.VRadio id="opt1" name="form.option" value="A" label="Option A" />
-<Den.Components.VRadio id="opt2" name="form.option" value="B" label="Option B" />
+<VRadio id="opt1" name="form.option" value="A" label="Option A" />
+<VRadio id="opt2" name="form.option" value="B" label="Option B" />
 
 // Radio Group (managed state)
-<Den.Components.VGroup
+<VGroup
   selectedValue="A"
   renderGroup={(selectedValue, handleSelect) => (
     <>
-      <Den.Components.VRadio id="opt1" name="form.option" value="A" label="A"
+      <VRadio id="opt1" name="form.option" value="A" label="A"
         isChecked={selectedValue === 'A'} onChange={handleSelect} />
-      <Den.Components.VRadio id="opt2" name="form.option" value="B" label="B"
+      <VRadio id="opt2" name="form.option" value="B" label="B"
         isChecked={selectedValue === 'B'} onChange={handleSelect} />
     </>
   )}
 />
 
 // Hidden field
-<Den.Components.VHidden name="form.id" value="123" />
+<VHidden name="form.id" value="123" />
 
 // Select (native <select>)
-<Den.Components.VSelect
+<VSelect
   name="form.country"
   items={[
     { caption: 'USA', value: 'us' },
@@ -729,7 +757,7 @@ const [value, setValue] = useState('');
 // ISelectItemData: { caption: string; value: string }
 
 // Dropdown (custom dropdown with icons)
-<Den.Components.VDropdown
+<VDropdown
   name="form.category"
   items={[
     { caption: 'Option A', value: 'a', icon: <IconA /> },
@@ -739,19 +767,26 @@ const [value, setValue] = useState('');
   downIcon={<DownArrowIcon />}   // required
   upIcon={<UpArrowIcon />}       // required
   enableClear
+  readOnly                        // renders as VLabel (non-interactive)
+  isSelectOnly                    // prevents manual typing, only allows selection from items
+  menuGap="4px"                   // gap between dropdown menu and trigger
+  menuBackgroundColor={ColorType.White}
+  menuZIndex={9999}
   handleChange={(value) => console.log(value)}
+  overWriteDropdownMenu={(items) => <CustomMenu items={items} />}   // custom menu renderer
+  overWriteDropdownItem={(item) => <CustomItem item={item} />}      // custom item renderer
 />
 // IDropdownItemData: { caption: string; value: string; icon?: JSX.Element }
 
 // Switch
-<Den.Components.VSwitch
+<VSwitch
   isOn={true}
   icon={<SwitchIcon />}
   onSwitch={(isOn) => console.log(isOn)}
 />
 
 // File upload
-<Den.Components.VFile
+<VFile
   name="form.avatar"
   isPreview                       // Show image preview
   accept=".jpg,.png"
@@ -760,70 +795,70 @@ const [value, setValue] = useState('');
 // FileCategory enum available for file categories
 
 // File with base64 output
-<Den.Components.VBase64File
+<VBase64File
   name="form.file"
   accept=".jpg,.jpeg,.png"
   base64Image="iVBOR..."         // Default base64 preview
 />
 
 // Submit button
-<Den.Components.VSubmit
+<VSubmit
   caption="Submit"
-  fontSize={Den.Components.FontSizeType.Small}
-  backgroundColor={Den.Components.ColorType.Primary}
-  frontColor={Den.Components.ColorType.White}
+  fontSize={FontSizeType.Small}
+  backgroundColor={ColorType.Primary}
+  frontColor={ColorType.White}
 />
 
 // Submit wrapper (wraps custom body with hidden submit input)
-<Den.Components.VSubmitWrapper body={<button>Custom Submit UI</button>} />
+<VSubmitWrapper body={<button>Custom Submit UI</button>} />
 ```
 
 ### Media Components
 
 ```tsx
 // Image
-<Den.Components.VImage
+<VImage
   src="/path/to/image.jpg"
   alt="Description"
-  category={Den.Components.ImageCategory.Circle}     // Circle, Squared, FullSize, Scale
+  category={ImageCategory.Circle}     // Circle, Squared, FullSize, Scale
 />
 
 // SVG (wraps imported SVG components)
 import IconSvg from './icon.svg';
-<Den.Components.VSvg
-  fontSize={Den.Components.FontSizeType.Large}
-  frontColor={Den.Components.ColorType.Primary}
+<VSvg
+  fontSize={FontSizeType.Large}
+  frontColor={ColorType.Primary}
 >
   <IconSvg />
-</Den.Components.VSvg>
+</VSvg>
 // SvgCategory enum available for SVG categories
 
 // Background image
-<Den.Components.VBackground
+<VBackground
   image="/path/to/bg.jpg"
   imageWidth="100%"
   imageHeight="400px"
-  position={Den.Components.BackgroundPositionType.Center}
+  position={BackgroundPositionType.Center}
 >
   <OverlayContent />
-</Den.Components.VBackground>
+</VBackground>
 
 // Audio / Video
-<Den.Components.VAudio src="/audio.mp3" />
-<Den.Components.VVideo src="/video.mp4" />
+<VAudio src="/audio.mp3" />
+<VVideo src="/video.mp4" />
 ```
 
 ### VTooltip
 
 ```tsx
 // Tooltip uses Dock internally. Requires renderOverlay and dockCategory.
-<Den.Components.VTooltip
-  category={Den.Components.TooltipCategory.Hover}
-  dockCategory={Den.Components.DockCategory.Top}
+<VTooltip
+  category={TooltipCategory.Hover}
+  dockCategory={DockCategory.Top}
   renderOverlay={() => <div>Tooltip content</div>}
 >
   <button>Hover me</button>
-</Den.Components.VTooltip>
+</VTooltip>
 
 // TooltipCategory: Hover (default), Click
 ```
@@ -832,14 +867,14 @@ import IconSvg from './icon.svg';
 
 ```tsx
 // Uses animate.css library. category is required.
-<Den.Components.VAnimation
-  category={Den.Components.AnimationCategory.Bounce}
-  speed={Den.Components.AnimationSpeed.Fast}
-  delay={Den.Components.AnimationDelay.Delay1Second}
-  repeat={Den.Components.AnimationRepeat.Infinite}
+<VAnimation
+  category={AnimationCategory.Bounce}
+  speed={AnimationSpeed.Fast}
+  delay={AnimationDelay.Delay1Second}
+  repeat={AnimationRepeat.Infinite}
 >
   <Content />
-</Den.Components.VAnimation>
+</VAnimation>
 
 // AnimationCategory: Bounce, Flash, Pulse, RubberBand, ShakeX, Swing, Tada,
 //   Wobble, Jello, HeartBeat, FadeIn, FadeOut, ZoomIn, ZoomOut,
@@ -853,23 +888,23 @@ import IconSvg from './icon.svg';
 ### Shape Components
 
 ```tsx
-<Den.Components.VEllipse width="100px" height="100px" backgroundColor={Den.Components.ColorType.Primary} />
+<VEllipse width="100px" height="100px" backgroundColor={ColorType.Primary} />
 // EllipseCategory enum available
 
-<Den.Components.VRectangle width="200px" height="50px" backgroundColor={Den.Components.ColorType.Info} />
+<VRectangle width="200px" height="50px" backgroundColor={ColorType.Info} />
 
-<Den.Components.VLine />
+<VLine />
 // LineCategory enum available
 
-<Den.Components.VShadow category={Den.Components.ShadowCategory.Small}><Content /></Den.Components.VShadow>
+<VShadow category={ShadowCategory.Small}><Content /></VShadow>
 ```
 
 ### VTheme (Theme Provider)
 
 ```tsx
-<Den.Components.VTheme category={Den.Components.ThemeCategory.Light}>
+<VTheme category={ThemeCategory.Light}>
   <App />
-</Den.Components.VTheme>
+</VTheme>
 
 // ThemeCategory: Light, Dark (or custom)
 // ThemeVariables type available for typed CSS variable overrides
@@ -879,53 +914,53 @@ import IconSvg from './icon.svg';
 
 ```tsx
 // VCard — structured card with head and body
-<Den.Components.VCard
-  head={<Den.Components.VLabel caption="Card Title" />}
-  body={<Den.Components.VText caption="Card content" />}
+<VCard
+  head={<VLabel caption="Card Title" />}
+  body={<VText caption="Card content" />}
   isDraggable={false}
 />
 
 // VCardMedia — card with media, head, body, foot sections
-<Den.Components.VCardMedia
-  media={<Den.Components.VImage src="/image.jpg" category={Den.Components.ImageCategory.FullSize} />}
-  head={<Den.Components.VLabel caption="Title" />}
-  body={<Den.Components.VText caption="Description" />}
+<VCardMedia
+  media={<VImage src="/image.jpg" category={ImageCategory.FullSize} />}
+  head={<VLabel caption="Title" />}
+  body={<VText caption="Description" />}
   foot={<button>Action</button>}
 />
 
 // VCardSocial — social media card variant
-<Den.Components.VCardSocial ... />
+<VCardSocial ... />
 
 // VCardWindow — card with background image
-<Den.Components.VCardWindow
+<VCardWindow
   backgroundUrl="/bg.jpg"
-  backgroundSize={Den.Components.CardWindowSizeType.Cover}
+  backgroundSize={CardWindowSizeType.Cover}
 >
   <OverlayContent />
-</Den.Components.VCardWindow>
+</VCardWindow>
 
 // VBlock — structured block with icon, action, caption, subCaption
-<Den.Components.VBlock
+<VBlock
   icon={<Icon />}
   action={<button>Edit</button>}
-  caption={<Den.Components.VLabel caption="Title" />}
-  subCaption={<Den.Components.VLabel caption="Subtitle" />}
+  caption={<VLabel caption="Title" />}
+  subCaption={<VLabel caption="Subtitle" />}
 />
 
 // VStack — stacks children with z-index layering
-<Den.Components.VStack>
+<VStack>
   <Layer1 />
   <Layer2 />
-</Den.Components.VStack>
+</VStack>
 
 // VTree — hierarchical tree view
-<Den.Components.VTree nodes={treeData} />
+<VTree nodes={treeData} />
 // IVTreeNode type exported for tree node data structure
 
 // VPhoto — background-image based photo with sizing
-<Den.Components.VPhoto
-  category={Den.Components.PhotoCategory.Cover}
-  position={Den.Components.PhotoPositionType.Center}
+<VPhoto
+  category={PhotoCategory.Cover}
+  position={PhotoPositionType.Center}
   src="/photo.jpg"
   width="100%"
   height="300px"
@@ -934,10 +969,10 @@ import IconSvg from './icon.svg';
 // PhotoPositionType: Left, Center, Right
 
 // VAvatar — user avatar display
-<Den.Components.VAvatar ... />
+<VAvatar ... />
 
 // VDynamic — renders component by name from registry
-<Den.Components.VDynamic
+<VDynamic
   components={{ MyWidget: WidgetComponent, MyChart: ChartComponent }}
   name="MyWidget"
   customProp="value"    // extra props are passed to the resolved component
@@ -949,39 +984,39 @@ import IconSvg from './icon.svg';
 
 ```tsx
 // Debug utility component
-<Den.Components.Debug ... />
+<Debug ... />
 
 // Google Font loader
-<Den.Components.VGoogleFont
-  type={Den.Components.GoogleFontType...}
+<VGoogleFont
+  type={GoogleFontType...}
   ...
 />
 // GoogleFontType, IGoogleTypeface, IGoogleFont types available
 
 // Chrome extension validation
-<Den.Components.VChromeExtensionValidator ... />
+<VChromeExtensionValidator ... />
 // ExtensionStatus enum exported
 
 // Auth components
-<Den.Components.GoogleGrant
-  category={Den.Components.GoogleGrantCategory.Implicit}
-  uxMode={Den.Components.GoogleGrantUXMode.Popup}
+<GoogleGrant
+  category={GoogleGrantCategory.Implicit}
+  uxMode={GoogleGrantUXMode.Popup}
   ...
 />
 // GoogleGrantCategory: Implicit, AuthorizationCode
 // GoogleGrantUXMode: Popup, Redirect
 // GoogleGrantCode, GoogleGrantToken types exported
 
-<Den.Components.GoogleSignin
-  uxMode={Den.Components.GoogleSigninUXMode...}
+<GoogleSignin
+  uxMode={GoogleSigninUXMode...}
   ...
 />
 
-<Den.Components.FigmaSignin ... />
-<Den.Components.WeComSignin ... />
+<FigmaSignin ... />
+<WeComSignin ... />
 
 // JWT utility
-Den.Components.parseJWT(token)  // returns IUserProfile
+parseJWT(token)  // returns IUserProfile
 // IUserProfile type exported
 ```
 
@@ -989,32 +1024,34 @@ Den.Components.parseJWT(token)  // returns IUserProfile
 
 ```tsx
 // Semantic HTML wrappers
-<Den.Components.VHeader>...</Den.Components.VHeader>
-<Den.Components.VMain>...</Den.Components.VMain>
-<Den.Components.VFooter>...</Den.Components.VFooter>
-<Den.Components.VSection>...</Den.Components.VSection>
-<Den.Components.VHR />
+<VHeader>...</VHeader>
+<VNav>...</VNav>
+<VMain>...</VMain>
+<VAside>...</VAside>
+<VFooter>...</VFooter>
+<VSection>...</VSection>
+<VHR />
 
 // Mask overlay
-<Den.Components.VMask><Content /></Den.Components.VMask>
+<VMask><Content /></VMask>
 
 // Iframe
-<Den.Components.VFrame src="https://example.com" />
+<VFrame src="https://example.com" />
 
 // Loading indicator
-<Den.Components.VLoading />
+<VLoading />
 
 // Error boundary
-<Den.Components.VErrorBoundary>
+<VErrorBoundary>
   <RiskyComponent />
-</Den.Components.VErrorBoundary>
+</VErrorBoundary>
 ```
 
 ### Utility Functions (core)
 
 ```tsx
 // Convert FormData to nested JSON (used internally by VForm)
-Den.Components.convertFormDataToJson(formData)
+convertFormDataToJson(formData)
 ```
 
 ---
@@ -1026,9 +1063,9 @@ Den.Components.convertFormDataToJson(formData)
 Before using network features, initialize the bootstrap:
 
 ```tsx
-import { Den } from '@fewbox/den-app';
+import { ... } from '@fewbox/den-app';
 
-Den.FewBox.boot({
+boot({
   getToken: () => localStorage.getItem('token') || '',
   getAppSettings: () => ({
     endpoint: {
@@ -1054,9 +1091,9 @@ Den.FewBox.boot({
 });
 
 // Or use the Boot component:
-<Den.Components.Boot options={bootOptions} />
+<Boot options={bootOptions} />
 
-// Types exported from Den.FewBox:
+// Types exported:
 // IFewBoxOptions, IAppSettings, IEndpoint, IError, BootClass
 ```
 
@@ -1065,21 +1102,21 @@ Den.FewBox.boot({
 All Fetch clients return RxJS Observables for use in Redux Observable epics:
 
 ```tsx
-import { Den } from '@fewbox/den-app';
+import { ... } from '@fewbox/den-app';
 
 // Default endpoint (uses app settings endpoint)
-new Den.Network.GetFetch('/users', (payload) => ({ type: 'USERS_LOADED', payload }));
-new Den.Network.PostFetch('/users', body, (payload) => ({ type: 'USER_CREATED', payload }));
-new Den.Network.PutFetch('/users/1', body, processAction);
-new Den.Network.PatchFetch('/users/1', body, processAction);
-new Den.Network.DeleteFetch('/users/1', processAction);
+new GetFetch('/users', (payload) => ({ type: 'USERS_LOADED', payload }));
+new PostFetch('/users', body, (payload) => ({ type: 'USER_CREATED', payload }));
+new PutFetch('/users/1', body, processAction);
+new PatchFetch('/users/1', body, processAction);
+new DeleteFetch('/users/1', processAction);
 
 // External endpoint (bypasses app settings, uses named endpoint from appSettings)
-new Den.Network.GetFetchExternal('externalService', '/data', processAction);
-new Den.Network.PostFetchExternal('externalService', '/data', body, processAction);
-new Den.Network.PutFetchExternal('externalService', '/data/1', body, processAction);
-new Den.Network.PatchFetchExternal('externalService', '/data/1', body, processAction);
-new Den.Network.DeleteFetchExternal('externalService', '/data/1', processAction);
+new GetFetchExternal('externalService', '/data', processAction);
+new PostFetchExternal('externalService', '/data', body, processAction);
+new PutFetchExternal('externalService', '/data/1', body, processAction);
+new PatchFetchExternal('externalService', '/data/1', body, processAction);
+new DeleteFetchExternal('externalService', '/data/1', processAction);
 ```
 
 ### AJAX-based HTTP Clients
@@ -1088,43 +1125,43 @@ RxJS Ajax-based clients (alternative to Fetch):
 
 ```tsx
 // Default endpoint
-new Den.Network.Get('/users', processAction);
-new Den.Network.Post('/users', body, processAction);
-new Den.Network.Put('/users/1', body, processAction);
-new Den.Network.Patch('/users/1', body, processAction);
-new Den.Network.Delete('/users/1', processAction);
+new Get('/users', processAction);
+new Post('/users', body, processAction);
+new Put('/users/1', body, processAction);
+new Patch('/users/1', body, processAction);
+new Delete('/users/1', processAction);
 
 // External endpoint
-new Den.Network.GetExternal('externalService', '/data', processAction);
-new Den.Network.PostExternal('externalService', '/data', body, processAction);
-new Den.Network.PutExternal('externalService', '/data/1', body, processAction);
-new Den.Network.PatchExternal('externalService', '/data/1', body, processAction);
-new Den.Network.DeleteExternal('externalService', '/data/1', processAction);
+new GetExternal('externalService', '/data', processAction);
+new PostExternal('externalService', '/data', body, processAction);
+new PutExternal('externalService', '/data/1', body, processAction);
+new PatchExternal('externalService', '/data/1', body, processAction);
+new DeleteExternal('externalService', '/data/1', processAction);
 
 // Text response variants (returns text instead of JSON)
-new Den.Network.GetText('/data', processAction);
-new Den.Network.PostText('/data', body, processAction);
-new Den.Network.PutText('/data', body, processAction);
-new Den.Network.PatchText('/data', body, processAction);
-new Den.Network.DeleteText('/data', processAction);
+new GetText('/data', processAction);
+new PostText('/data', body, processAction);
+new PutText('/data', body, processAction);
+new PatchText('/data', body, processAction);
+new DeleteText('/data', processAction);
 // External text variants: GetTextExternal, PostTextExternal, PutTextExternal, PatchTextExternal, DeleteTextExternal
 
 // Local storage
-new Den.Network.GetLocal('/local-path', processAction);
+new GetLocal('/local-path', processAction);
 ```
 
 ### GraphQL
 
 ```tsx
 // Default endpoint
-new Den.Network.GQL({ query: 'query { users { id name } }' }, processAction);
+new GQL({ query: 'query { users { id name } }' }, processAction);
 
 // External endpoint
-new Den.Network.GQLExternal('externalService', { query: 'mutation { ... }' }, processAction);
+new GQLExternal('externalService', { query: 'mutation { ... }' }, processAction);
 
 // File upload
-new Den.Network.GQLUpload({ query: '...', variables: { file } }, processAction);
-new Den.Network.GQLExternalUpload('externalService', { query: '...' }, processAction);
+new GQLUpload({ query: '...', variables: { file } }, processAction);
+new GQLExternalUpload('externalService', { query: '...' }, processAction);
 
 // IGraphQL type available for query/mutation objects
 ```
@@ -1132,17 +1169,17 @@ new Den.Network.GQLExternalUpload('externalService', { query: '...' }, processAc
 ### Server-Sent Events (SSE)
 
 ```tsx
-new Den.Network.GetSSE('/events', processAction);
-new Den.Network.PostSSE('/events', processAction);
-new Den.Network.GetSSEExternal('externalService', '/events', processAction);
-new Den.Network.PostSSEExternal('externalService', '/events', processAction);
+new GetSSE('/events', processAction);
+new PostSSE('/events', processAction);
+new GetSSEExternal('externalService', '/events', processAction);
+new PostSSEExternal('externalService', '/events', processAction);
 ```
 
 ### WebSocket
 
 ```tsx
-new Den.Network.WS({ url: 'wss://example.com/ws' });
-// Den.Network.ws() function also available
+new WS({ url: 'wss://example.com/ws' });
+// ws() function also available
 // IWebsocketOptions type exported
 ```
 
@@ -1152,18 +1189,18 @@ For use outside Redux Observable epics:
 
 ```tsx
 // Default endpoint
-Den.Network.verbsGetPromise('/users');
-Den.Network.verbsPostPromise('/users', body);
-Den.Network.verbsPutPromise('/users/1', body);
-Den.Network.verbsPatchPromise('/users/1', body);
-Den.Network.verbsDeletePromise('/users/1');
+verbsGetPromise('/users');
+verbsPostPromise('/users', body);
+verbsPutPromise('/users/1', body);
+verbsPatchPromise('/users/1', body);
+verbsDeletePromise('/users/1');
 
 // External endpoint
-Den.Network.verbsGetPromiseExternal('externalService', '/data');
-Den.Network.verbsPostPromiseExternal('externalService', '/data', body);
-Den.Network.verbsPutPromiseExternal('externalService', '/data/1', body);
-Den.Network.verbsPatchPromiseExternal('externalService', '/data/1', body);
-Den.Network.verbsDeletePromiseExternal('externalService', '/data/1');
+verbsGetPromiseExternal('externalService', '/data');
+verbsPostPromiseExternal('externalService', '/data', body);
+verbsPutPromiseExternal('externalService', '/data/1', body);
+verbsPatchPromiseExternal('externalService', '/data/1', body);
+verbsDeletePromiseExternal('externalService', '/data/1');
 ```
 
 ### Raw HTTP Verb Functions
@@ -1180,14 +1217,14 @@ Low-level verb functions that return Observables:
 ### Network Utilities
 
 ```tsx
-Den.Network.buildHeaders(customHeaders);          // Merge custom headers with JWT token
-Den.Network.buildUrl(path);                        // Build URL from app settings endpoint
-Den.Network.buildExternalUrl(externalName, path);  // Build URL from named external endpoint
-Den.Network.JsonHeaders;                           // Default JSON content-type headers
-Den.Network.parseAjaxData(response);               // Parse AJAX response
-Den.Network.parseFetchData(response);              // Parse Fetch response
-Den.Network.parseGQLAjaxData(response);            // Parse GraphQL response
-Den.Network.convertJsonToGraphQLSchema(json);      // Convert JSON to GraphQL schema string
+buildHeaders(customHeaders);          // Merge custom headers with JWT token
+buildUrl(path);                        // Build URL from app settings endpoint
+buildExternalUrl(externalName, path);  // Build URL from named external endpoint
+JsonHeaders;                           // Default JSON content-type headers
+parseAjaxData(response);               // Parse AJAX response
+parseFetchData(response);              // Parse Fetch response
+parseGQLAjaxData(response);            // Parse GraphQL response
+convertJsonToGraphQLSchema(json);      // Convert JSON to GraphQL schema string
 ```
 
 ### Redux Observable Epic Pattern
@@ -1200,7 +1237,7 @@ const fetchUsersEpic = (action$) =>
   action$.pipe(
     ofType('FETCH_USERS'),
     switchMap(() =>
-      new Den.Network.GetFetch('/users', (payload) => ({
+      new GetFetch('/users', (payload) => ({
         type: 'USERS_LOADED',
         payload
       }))
@@ -1221,20 +1258,20 @@ const fetchUsersEpic = (action$) =>
 Type definitions for Redux store integration:
 
 ```tsx
-import { Den } from '@fewbox/den-app';
+import { ... } from '@fewbox/den-app';
 
 // Pagination
-type IList = Den.Store.IList;                     // List response wrapper
-type IPaging = Den.Store.IPaging;                 // Paged list with page/size
-type IContinuePaging = Den.Store.IContinuePaging; // Cursor-based pagination
+type IList = IList;                     // List response wrapper
+type IPaging = IPaging;                 // Paged list with page/size
+type IContinuePaging = IContinuePaging; // Cursor-based pagination
 
 // Data types
-type Json = Den.Store.Json;                       // Generic JSON type
-type EnumDictionary<K, V> = Den.Store.EnumDictionary<K, V>; // Enum-keyed dictionary
+type Json = Json;                       // Generic JSON type
+type EnumDictionary<K, V> = EnumDictionary<K, V>; // Enum-keyed dictionary
 
 // Response wrappers
-type IMetaResponse = Den.Store.IMetaResponse;           // Response with metadata
-type IPayloadResponse = Den.Store.IPayloadResponse;     // Response with payload
+type IMetaResponse = IMetaResponse;           // Response with metadata
+type IPayloadResponse = IPayloadResponse;     // Response with payload
 ```
 
 ---
@@ -1244,18 +1281,18 @@ type IPayloadResponse = Den.Store.IPayloadResponse;     // Response with payload
 Internationalization utilities:
 
 ```tsx
-import { Den } from '@fewbox/den-app';
+import { ... } from '@fewbox/den-app';
 
 // Get browser language
-Den.Language.getBrowserLang();       // "en" (short code)
-Den.Language.getBrowserLangFull();   // "en-US" (full code)
+getBrowserLang();       // "en" (short code)
+getBrowserLangFull();   // "en-US" (full code)
 
 // Get formatted intl message (uses BootClass language config)
-Den.Language.getIntlMessage('Hello.World', 'en', { name: 'World' });
+getIntlMessage('Hello.World', 'en', { name: 'World' });
 
 // Select messages for a locale from a locales object
-const messages = Den.Language.language(locales, 'en');
-const messagesFull = Den.Language.languageFull(locales, 'en-US');
+const messages = language(locales, 'en');
+const messagesFull = languageFull(locales, 'en-US');
 ```
 
 ---
@@ -1296,114 +1333,114 @@ RightTop, RightBottom, LeftTop, LeftBottom, TopBottom, LeftRight
 ### Page Layout (header + content + footer)
 
 ```tsx
-<Den.Components.Y height="100vh">
-  <Den.Components.VBoundary padding="1em" backgroundColor={Den.Components.ColorType.Primary}>
+<Y height="100vh">
+  <VBoundary padding="1em" backgroundColor={ColorType.Primary}>
     <Header />
-  </Den.Components.VBoundary>
-  <Den.Components.VBoundary selfGrow={1} overflow="auto" padding="1em">
+  </VBoundary>
+  <VBoundary selfGrow={1} overflow="auto" padding="1em">
     <MainContent />
-  </Den.Components.VBoundary>
-  <Den.Components.VBoundary padding="1em" backgroundColor={Den.Components.ColorType.Dark}>
+  </VBoundary>
+  <VBoundary padding="1em" backgroundColor={ColorType.Dark}>
     <Footer />
-  </Den.Components.VBoundary>
-</Den.Components.Y>
+  </VBoundary>
+</Y>
 ```
 
 ### Centered Content
 
 ```tsx
-<Den.Components.XCenter height="100%">
-  <Den.Components.SCenter><Content /></Den.Components.SCenter>
-</Den.Components.XCenter>
+<XCenter height="100%">
+  <SCenter><Content /></SCenter>
+</XCenter>
 ```
 
 ### Sidebar Layout
 
 ```tsx
-<Den.Components.X height="100vh">
-  <Den.Components.VBoundary width="250px" backgroundColor={Den.Components.ColorType.Dark}>
+<X height="100vh">
+  <VBoundary width="250px" backgroundColor={ColorType.Dark}>
     <Sidebar />
-  </Den.Components.VBoundary>
-  <Den.Components.VBoundary selfGrow={1}><MainContent /></Den.Components.VBoundary>
-</Den.Components.X>
+  </VBoundary>
+  <VBoundary selfGrow={1}><MainContent /></VBoundary>
+</X>
 ```
 
 ### Sticky Navigation Bar
 
 ```tsx
-<Den.Components.Position category={Den.Components.PositionCategory.Edge} top="0px" isFullWidth zIndex={10}>
-  <Den.Components.XBetween height="48px" padding="0 1em" backgroundColor={Den.Components.ColorType.Primary}>
-    <Den.Components.VLabel caption="Logo" frontColor={Den.Components.ColorType.White} />
-    <Den.Components.XRight gap="1em">
-      <Den.Components.VHyperlink category={Den.Components.HyperlinkCategory.Self} to="/about">About</Den.Components.VHyperlink>
-      <Den.Components.VHyperlink category={Den.Components.HyperlinkCategory.Self} to="/contact">Contact</Den.Components.VHyperlink>
-    </Den.Components.XRight>
-  </Den.Components.XBetween>
-</Den.Components.Position>
+<Position category={PositionCategory.Edge} top="0px" isFullWidth zIndex={10}>
+  <XBetween height="48px" padding="0 1em" backgroundColor={ColorType.Primary}>
+    <VLabel caption="Logo" frontColor={ColorType.White} />
+    <XRight gap="1em">
+      <VHyperlink category={HyperlinkCategory.Self} to="/about">About</VHyperlink>
+      <VHyperlink category={HyperlinkCategory.Self} to="/contact">Contact</VHyperlink>
+    </XRight>
+  </XBetween>
+</Position>
 ```
 
 ### Form with Validation
 
 ```tsx
-<Den.Components.VForm
+<VForm
   handleSubmit={(data) => api.login(data.form)}
   handleValidateError={(invalidInputs) => { invalidInputs[0]?.focus(); }}>
-  <Den.Components.Y gap="1em" padding="2em">
-    <Den.Components.VEmail name="form.email" required placeholder="Email" label="Email" />
-    <Den.Components.VPassword name="form.password" required minLength={8} placeholder="Password" label="Password" />
-    <Den.Components.VSubmit caption="Sign In" backgroundColor={Den.Components.ColorType.Primary}
-      frontColor={Den.Components.ColorType.White} borderRadius="0.5em" padding="0.8em 2em" />
-  </Den.Components.Y>
-</Den.Components.VForm>
+  <Y gap="1em" padding="2em">
+    <VEmail name="form.email" required placeholder="Email" label="Email" />
+    <VPassword name="form.password" required minLength={8} placeholder="Password" label="Password" />
+    <VSubmit caption="Sign In" backgroundColor={ColorType.Primary}
+      frontColor={ColorType.White} borderRadius="0.5em" padding="0.8em 2em" />
+  </Y>
+</VForm>
 ```
 
 ### Card Grid (app variant)
 
 ```tsx
-<Den.Components.XWrapEvenly gap="1em" padding="1em">
+<XWrapEvenly gap="1em" padding="1em">
   {items.map(item => (
-    <Den.Components.VCardMedia
+    <VCardMedia
       key={item.id}
       width="300px"
       borderRadius="0.5em"
-      borderColor={Den.Components.ColorType.Border}
+      borderColor={ColorType.Border}
       borderStyle="solid"
       borderWidth="1px"
-      media={<Den.Components.VImage src={item.image} category={Den.Components.ImageCategory.FullSize} />}
-      head={<Den.Components.VLabel category={Den.Components.LabelCategory.H3} caption={item.title} />}
-      body={<Den.Components.VText caption={item.description} />}
+      media={<VImage src={item.image} category={ImageCategory.FullSize} />}
+      head={<VLabel category={LabelCategory.H3} caption={item.title} />}
+      body={<VText caption={item.description} />}
     />
   ))}
-</Den.Components.XWrapEvenly>
+</XWrapEvenly>
 ```
 
 ### Absolute Positioning Inside Container
 
 ```tsx
-<Den.Components.PositionArea category={Den.Components.PositionAreaCategory.FullSize}>
-  <Den.Components.VBoundary height="300px" backgroundColor={Den.Components.ColorType.Dark}>
-    <Den.Components.Position category={Den.Components.PositionCategory.Area} type={Den.Components.PositionType.LeftTop}>
+<PositionArea category={PositionAreaCategory.FullSize}>
+  <VBoundary height="300px" backgroundColor={ColorType.Dark}>
+    <Position category={PositionCategory.Area} type={PositionType.LeftTop}>
       <TopLeftContent />
-    </Den.Components.Position>
-    <Den.Components.Position category={Den.Components.PositionCategory.Area} type={Den.Components.PositionType.Center}>
+    </Position>
+    <Position category={PositionCategory.Area} type={PositionType.Center}>
       <CenterContent />
-    </Den.Components.Position>
-  </Den.Components.VBoundary>
-</Den.Components.PositionArea>
+    </Position>
+  </VBoundary>
+</PositionArea>
 ```
 
 ### Responsive Layout
 
 ```tsx
-<Den.Components.Responsive
-  breakpointType={Den.Components.ScreenSizeType.Medium}
-  desktop={<Den.Components.X gap="1em">
+<Responsive
+  breakpointType={ScreenSizeType.Medium}
+  desktop={<X gap="1em">
     <Sidebar />
     <MainContent />
-  </Den.Components.X>}
-  mobile={<Den.Components.Y gap="1em">
+  </X>}
+  mobile={<Y gap="1em">
     <MainContent />
-  </Den.Components.Y>}
+  </Y>}
 />
 ```