@fewbox/den-app 0.1.43

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

@@ -0,0 +1,1111 @@
+---
+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.
+allowed-tools: Read, Grep, Glob
+---
+
+# FewBox Den - Component Library Reference
+
+When writing code that uses fewbox-den, follow the patterns and API documented below.
+
+## Import Pattern
+
+All components are accessed through the `Den` namespace:
+
+```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
+```
+
+### Variant Exports
+
+- **core**: Layout (X/Y/S/Flex/Position/Dock/Display/Responsive), View (VBoundary, VLabel, VText, VForm, 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)
+- **web**: core + Debug, VGoogleFont, VChromeExtensionValidator, GoogleGrant, GoogleSignin, FigmaSignin, WeComSignin
+- **app**: web + VDynamic, VAvatar, VBlock, VCard, VCardMedia, VCardSocial, VCardWindow, VPhoto, VStack, VTree
+
+## Core Concepts
+
+### Common Props (IBaseProps)
+
+All components extend `IBaseProps` which provides these shared props:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `className` | `string` | Additional CSS classes |
+| `style` | `CSSProperties` | Inline styles |
+| `fontSize` | `FontSizeType \| string` | Font size preset or custom value |
+| `fontWeight` | `FontWeightType` | Font weight (Thin through Black) |
+| `frontColor` | `ColorType \| string` | Text/foreground color |
+| `backgroundColor` | `ColorType \| string` | Background color |
+| `borderColor` | `ColorType \| string` | Border color |
+| `borderDirection` | `DirectionType` | Which sides get the border |
+| `padding` | `string` | CSS padding |
+| `margin` | `string` | CSS margin |
+| `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 |
+| `borderRadius` | `string` | CSS border-radius |
+| `borderWidth` | `string` | CSS border-width |
+| `borderStyle` | `string` | CSS border-style |
+| `opacity` | `number` | CSS opacity |
+| `display` | `string` | CSS display |
+| `overflow` | `string` | CSS overflow |
+| `cursor` | `string` | CSS cursor |
+| `selfShrink` | `number` | flex-shrink for the component itself |
+| `selfGrow` | `number` | flex-grow for the component itself |
+| `selfBasis` | `string` | flex-basis for the component itself |
+| `isDefaultValue` | `boolean` | Apply default transparency and color resets |
+
+### Color System (ColorType)
+
+Pre-defined semantic colors with opacity variants:
+
+```tsx
+ColorType.Font          // #000
+ColorType.Body          // #f5f8fa
+ColorType.White         // #fff
+ColorType.Black         // #000
+ColorType.Light         // light gray
+ColorType.Dark          // dark gray
+ColorType.Primary       // magenta
+ColorType.Secondary     // pink
+ColorType.Tertiary      // gold
+ColorType.Info          // blue
+ColorType.Success       // green
+ColorType.Warning       // yellow
+ColorType.Error         // red
+ColorType.Border        // border color
+ColorType.Placeholder   // placeholder color
+ColorType.Transparent   // transparent
+
+// Each color has opacity variants:
+ColorType.Primary75     // 75% opacity
+ColorType.Primary50     // 50% opacity
+ColorType.Primary25     // 25% opacity
+```
+
+### Font Size System (FontSizeType)
+
+```tsx
+FontSizeType.ExtraSmall
+FontSizeType.Small
+FontSizeType.Normal
+FontSizeType.Default
+FontSizeType.Large
+FontSizeType.ExtraLarge
+
+// Auto-responsive variants:
+FontSizeType.AutoExtraSmall
+FontSizeType.AutoSmall
+FontSizeType.AutoNormal
+FontSizeType.AutoLarge
+FontSizeType.AutoExtraLarge
+
+// Custom font size (string):
+fontSize="custom"  // applies class "font-size-custom", define in CSS
+```
+
+### Font Weight System (FontWeightType)
+
+```tsx
+FontWeightType.Thin          // 100
+FontWeightType.ExtraLight    // 200
+FontWeightType.Light         // 300
+FontWeightType.Regular       // 400
+FontWeightType.Medium        // 500
+FontWeightType.SemiBold      // 600
+FontWeightType.Bold          // 700
+FontWeightType.ExtraBold     // 800
+FontWeightType.Black         // 900
+```
+
+---
+
+## Layout Components
+
+### X-Series (Horizontal Layout, flex-direction: row)
+
+All X-series components accept `gap`, `cross`, `itemsShrink` props in addition to common props.
+
+```tsx
+// Basic horizontal layout (default: justify-content: flex-start)
+<Den.Components.X gap="1em">
+  <Child1 /> <Child2 /> <Child3 />
+</Den.Components.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
+
+// 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
+
+// Custom flex-basis distribution:
+<Den.Components.XCustom basises={['20%', '30%', '50%']}>
+  <Child1 /> <Child2 /> <Child3 />
+</Den.Components.XCustom>
+
+// Uniform flex-basis with auto-margin sides:
+<Den.Components.XCustomBoth basis="10%">
+  <Child1 /> <Child2 /> <Child3 />
+</Den.Components.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
+```
+
+**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
+```
+
+### Y-Series (Vertical Layout, flex-direction: column)
+
+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
+
+// 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>
+
+// Custom:
+<Den.Components.YCustom basises={['auto', '1fr', 'auto']}>...</Den.Components.YCustom>
+<Den.Components.YCustomBoth basis="10%">...</Den.Components.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>
+```
+
+**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
+```
+
+### S-Series (Individual Item Cross-axis Override)
+
+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">
+  <Child1 />     {/* aligned to bottom */}
+  <Child2 />     {/* aligned to bottom */}
+  <Den.Components.STop>
+    <Child3 />   {/* overridden to top */}
+  </Den.Components.STop>
+</Den.Components.XCenter>
+
+// In X containers (cross-axis is vertical):
+<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.SStretch>...</Den.Components.SStretch>  // align-self: stretch
+<Den.Components.SBaseline>...</Den.Components.SBaseline>// align-self: baseline
+
+// In Y containers (cross-axis is horizontal):
+<Den.Components.SLeft>...</Den.Components.SLeft>        // align-self: flex-start
+<Den.Components.SCenter>...</Den.Components.SCenter>    // align-self: center
+<Den.Components.SRight>...</Den.Components.SRight>      // align-self: flex-end
+<Den.Components.SStretch>...</Den.Components.SStretch>  // align-self: stretch
+<Den.Components.SBaseline>...</Den.Components.SBaseline>// align-self: baseline
+```
+
+### Position & PositionArea
+
+```tsx
+// PositionArea establishes a positioning context (position: relative) on its child.
+// PositionCategory.Area = position: absolute (for items inside)
+<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}>
+      <Content />
+    </Den.Components.Position>
+  </Den.Components.VBoundary>
+</Den.Components.PositionArea>
+
+// PositionAreaCategory:
+// Default = inline-block container
+// FullSize = block container
+
+// PositionCategory:
+// Edge   = position: sticky
+// Window = position: fixed
+// Area   = position: absolute
+// Self   = position: relative
+
+// PositionType (predefined positions):
+// 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">
+  <Content />
+</Den.Components.Position>
+
+// Sticky navbar example:
+<Den.Components.Position category={Den.Components.PositionCategory.Edge} top="0px" isFullWidth zIndex={10}>
+  <NavBar />
+</Den.Components.Position>
+
+// Position props: category (required), type, top, right, bottom, left, zIndex, isFullWidth
+```
+
+### Dock (Anchored Overlay Positioning)
+
+```tsx
+// Dock positions an overlay relative to its children.
+// renderOverlay is REQUIRED — returns the overlay element.
+<Den.Components.Dock
+  category={Den.Components.DockCategory.Top}
+  offset={4}
+  renderOverlay={() => <div>Tooltip above</div>}
+>
+  <button>Hover me</button>
+</Den.Components.Dock>
+
+// DockCategory:
+// Top, Right, Bottom, Left
+// LeftTop, RightTop, LeftBottom, RightBottom
+// InnerTop, InnerRight, InnerBottom, InnerLeft
+// InnerLeftTop, InnerRightTop, InnerLeftBottom, InnerRightBottom
+
+// DockAlignment (only for corner categories like LeftTop, RightTop, etc.):
+// Horizontal, Vertical
+
+// Corner with alignment:
+<Den.Components.Dock
+  category={Den.Components.DockCategory.LeftTop}
+  alignment={Den.Components.DockAlignment.Horizontal}
+  offset={4}
+  renderOverlay={() => <DropdownMenu />}
+>
+  <TriggerButton />
+</Den.Components.Dock>
+```
+
+### Display (Responsive Show/Hide)
+
+**Important:** Display uses `cloneElement` to inject className — child must accept `className` prop.
+
+```tsx
+// DisplayCategory: Visiable, Hidden
+// DisplayType: Only, Up, Down
+
+// Always visible
+<Den.Components.Display category={Den.Components.DisplayCategory.Visiable}>
+  <div>Always shown</div>
+</Den.Components.Display>
+
+// Always hidden
+<Den.Components.Display category={Den.Components.DisplayCategory.Hidden}>
+  <div>Always hidden</div>
+</Den.Components.Display>
+
+// Responsive: visible only on Medium breakpoint
+<Den.Components.Display
+  category={Den.Components.DisplayCategory.Visiable}
+  type={Den.Components.DisplayType.Only}
+  breakpoint={Den.Components.BreakpointType.Medium}
+>
+  <div>Medium only</div>
+</Den.Components.Display>
+
+// Hidden on Small and below
+<Den.Components.Display
+  category={Den.Components.DisplayCategory.Hidden}
+  type={Den.Components.DisplayType.Down}
+  breakpoint={Den.Components.BreakpointType.Small}
+>
+  <div>Hidden on mobile</div>
+</Den.Components.Display>
+
+// Multiple breakpoints (array):
+<Den.Components.Display
+  category={Den.Components.DisplayCategory.Visiable}
+  breakpoint={[Den.Components.BreakpointType.Small, Den.Components.BreakpointType.Large]}
+>
+  <div>Visible on Small and Large</div>
+</Den.Components.Display>
+
+// BreakpointType: ExtraSmall, Small, Medium, Large, ExtraLarge, ExtraExtraLarge
+```
+
+### Responsive (Desktop/Mobile Switch)
+
+```tsx
+// Shorthand for showing desktop or mobile content based on breakpoint.
+// Children must accept className prop (uses Display internally).
+<Den.Components.Responsive
+  breakpointType={Den.Components.BreakpointType.Medium}
+  desktop={<div>Desktop layout</div>}
+  mobile={<div>Mobile layout</div>}
+/>
+```
+
+### VZone (Responsive Container)
+
+```tsx
+// 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">
+  <Content />
+</Den.Components.VZone>
+
+// ZoneCategory:
+// Fluid          — always 100%, no max-width
+// Small          — constrained from ≥576px (540→720→960→1140→1320)
+// Medium         — constrained from ≥768px (720→960→1140→1320)
+// Large          — constrained from ≥992px (960→1140→1320)
+// ExtraLarge     — constrained from ≥1200px (1140→1320)
+// ExtraExtraLarge — constrained from ≥1400px (1320)
+```
+
+### Flex & FlexItem (Low-level Control)
+
+```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}
+  gap="1em"
+>
+  ...
+</Den.Components.Flex>
+
+// FlexItem — wraps a child with flex item properties
+<Den.Components.FlexItem grow={1} shrink={0} basis="200px" order={2}>
+  <Content />
+</Den.Components.FlexItem>
+```
+
+---
+
+## View Components
+
+### VBoundary (Generic Container)
+
+The basic div wrapper. Use as a general-purpose container:
+
+```tsx
+<Den.Components.VBoundary
+  padding="1em"
+  backgroundColor={Den.Components.ColorType.Light}
+  borderRadius={Den.Components.BorderRadiusType.Default}
+  width="100%"
+>
+  <Content />
+</Den.Components.VBoundary>
+```
+
+### VLabel (Text/Label)
+
+For inline text. Renders as `<span>` by default, configurable to any inline/heading element:
+
+```tsx
+// Basic label
+<Den.Components.VLabel caption="Hello World" />
+
+// With heading category
+<Den.Components.VLabel
+  category={Den.Components.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}
+  caption="Important Text"
+/>
+
+// Circle label (badge)
+<Den.Components.VLabel
+  type={Den.Components.LabelType.Circle}
+  frontColor={Den.Components.ColorType.White}
+  backgroundColor={Den.Components.ColorType.Black}
+  caption="X"
+/>
+
+// Text overflow (ellipsis)
+<Den.Components.VLabel
+  isTextOverflow
+  width="12em"
+  caption="This very long text will be truncated with ellipsis..."
+/>
+
+// Alignment
+<Den.Components.VLabel
+  alignType={Den.Components.LabelAlignType.Center}
+  caption="Centered text"
+/>
+
+// i18n with React Intl
+<Den.Components.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.
+```
+
+### VText (Block Text)
+
+For block-level text (p, article, section, etc.):
+
+```tsx
+<Den.Components.VText
+  category={Den.Components.TextCategory.P}
+  caption="Paragraph text content."
+/>
+
+<Den.Components.VText
+  alignType={Den.Components.TextAlignType.Center}
+  renderContent={() => <span>Complex <strong>content</strong></span>}
+/>
+```
+
+### VHyperlink
+
+```tsx
+// Renders an <a> tag. Requires category and to props.
+<Den.Components.VHyperlink
+  category={Den.Components.HyperlinkCategory.Self}
+  to="/about"
+>
+  Click me
+</Den.Components.VHyperlink>
+
+// Open in new window
+<Den.Components.VHyperlink
+  category={Den.Components.HyperlinkCategory.NewWindow}
+  to="https://example.com"
+>
+  External link
+</Den.Components.VHyperlink>
+
+// HyperlinkCategory: NewWindow (_blank), Self (_self), Parent (_parent), Top (_top)
+```
+
+### Form Components
+
+#### VForm (Form Container)
+
+```tsx
+<Den.Components.VForm
+  handleSubmit={(data) => {
+    // data is automatically converted from FormData to nested JSON
+    // e.g., { form: { username: "value", password: "value" } }
+    console.log(data);
+  }}
+  handleValidateError={(input) => {
+    // Called when HTML5 validation fails
+    input.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>
+```
+
+**Form data naming conventions:**
+- `name="form.username"` -> `{ form: { username: "value" } }`
+- `name="form.roles[]"` -> `{ form: { roles: ["value1", "value2"] } }`
+- `name="#form.data[]"` -> Parses JSON string values in the array
+
+#### Input Components
+
+```tsx
+// Text input
+<Den.Components.VTextBox
+  name="form.name"
+  placeholder="Enter name"
+  label="Name"                    // Floating label
+  icon={<IconElement />}          // Prefix icon
+  enableClear                     // Show clear (X) button
+  required                        // HTML5 validation
+  value="default"                 // Initial value
+/>
+
+// Controlled input with hooks
+const [value, setValue] = useState('');
+<Den.Components.VTextBox
+  name="form.search"
+  valueHook={value}
+  setStateHook={setValue}
+/>
+
+// With suffix options
+<Den.Components.VTextBox
+  renderOptions={(inputRef) => (
+    <Den.Components.VSvg onClick={() => alert(inputRef.current?.value)}>
+      <SearchIcon />
+    </Den.Components.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.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} />
+
+// TextArea
+<Den.Components.VTextArea name="form.bio" rows={6} placeholder="Bio" />
+
+// Checkbox
+<Den.Components.VCheckBox
+  id="form.agree"
+  name="form.agree"
+  label="I agree"
+  isChecked={true}
+  frontColor={Den.Components.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" />
+
+// Hidden field
+<Den.Components.VHidden name="form.id" value="123" />
+
+// Select (native <select>)
+<Den.Components.VSelect
+  name="form.country"
+  items={[
+    { caption: 'USA', value: 'us' },
+    { caption: 'China', value: 'cn' }
+  ]}
+  value="us"
+/>
+
+// Dropdown (custom dropdown with icons)
+<Den.Components.VDropdown
+  name="form.category"
+  items={[
+    { caption: 'Option A', value: 'a', icon: <IconA /> },
+    { caption: 'Option B', value: 'b' }
+  ]}
+  emptyIcon={<EmptyIcon />}      // required
+  downIcon={<DownArrowIcon />}   // required
+  upIcon={<UpArrowIcon />}       // required
+  enableClear
+  handleChange={(value) => console.log(value)}
+/>
+
+// Switch
+<Den.Components.VSwitch
+  isOn={true}
+  icon={<SwitchIcon />}
+  onSwitch={(isOn) => console.log(isOn)}
+/>
+
+// File upload
+<Den.Components.VFile
+  name="form.avatar"
+  isPreview                       // Show image preview
+  accept=".jpg,.png"
+  appearance={<UploadIcon />}     // Custom trigger element
+/>
+
+// File with base64 output
+<Den.Components.VBase64File
+  name="form.file"
+  accept=".jpg,.jpeg,.png"
+  base64Image="iVBOR..."         // Default base64 preview
+/>
+
+// Submit button
+<Den.Components.VSubmit
+  caption="Submit"
+  fontSize={Den.Components.FontSizeType.Small}
+  backgroundColor={Den.Components.ColorType.Primary}
+  frontColor={Den.Components.ColorType.White}
+/>
+```
+
+### Media Components
+
+```tsx
+// Image
+<Den.Components.VImage
+  src="/path/to/image.jpg"
+  alt="Description"
+  category={Den.Components.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}
+>
+  <IconSvg />
+</Den.Components.VSvg>
+
+// Background image
+<Den.Components.VBackground
+  image="/path/to/bg.jpg"
+  imageWidth="100%"
+  imageHeight="400px"
+  position={Den.Components.BackgroundPositionType.Center}
+>
+  <OverlayContent />
+</Den.Components.VBackground>
+
+// Audio / Video
+<Den.Components.VAudio src="/audio.mp3" />
+<Den.Components.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}
+  renderOverlay={() => <div>Tooltip content</div>}
+>
+  <button>Hover me</button>
+</Den.Components.VTooltip>
+
+// TooltipCategory: Hover (default), Click
+```
+
+### VAnimation
+
+```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}
+>
+  <Content />
+</Den.Components.VAnimation>
+
+// AnimationCategory: Bounce, Flash, Pulse, RubberBand, ShakeX, Swing, Tada,
+//   Wobble, Jello, HeartBeat, FadeIn, FadeOut, ZoomIn, ZoomOut,
+//   SlideInDown, SlideInUp, SlideInLeft, SlideInRight,
+//   BounceIn, BounceOut, RotateIn, RotateOut, RollIn, RollOut, etc. (150+)
+// AnimationSpeed: Slow (2s), Slower (3s), Fast (800ms), Faster (500ms)
+// AnimationDelay: Delay1Second, Delay2Second, Delay3Second, Delay4Second, Delay5Second
+// AnimationRepeat: Once, Twice, Thrice, Infinite
+```
+
+### Shape Components
+
+```tsx
+<Den.Components.VEllipse width="100px" height="100px" backgroundColor={Den.Components.ColorType.Primary} />
+<Den.Components.VRectangle width="200px" height="50px" backgroundColor={Den.Components.ColorType.Info} />
+<Den.Components.VLine />
+<Den.Components.VShadow category={Den.Components.ShadowCategory.Small}><Content /></Den.Components.VShadow>
+```
+
+### App-only Components (app variant)
+
+```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" />}
+  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" />}
+  foot={<button>Action</button>}
+/>
+
+// VCardWindow — card with background image
+<Den.Components.VCardWindow
+  backgroundUrl="/bg.jpg"
+  backgroundSize={Den.Components.CardWindowSizeType.Cover}
+>
+  <OverlayContent />
+</Den.Components.VCardWindow>
+
+// VBlock — structured block with icon, action, caption, subCaption
+<Den.Components.VBlock
+  icon={<Icon />}
+  action={<button>Edit</button>}
+  caption={<Den.Components.VLabel caption="Title" />}
+  subCaption={<Den.Components.VLabel caption="Subtitle" />}
+/>
+
+// VStack — stacks children with z-index layering
+<Den.Components.VStack>
+  <Layer1 />
+  <Layer2 />
+</Den.Components.VStack>
+
+// VTree — hierarchical tree view
+<Den.Components.VTree nodes={treeData} />
+
+// VDynamic — renders component by name from registry
+<Den.Components.VDynamic
+  components={{ MyWidget: WidgetComponent, MyChart: ChartComponent }}
+  name="MyWidget"
+  customProp="value"    // extra props are passed to the resolved component
+  notFindMessage="Component not found"
+/>
+```
+
+### Other View Components
+
+```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 />
+
+// Mask overlay
+<Den.Components.VMask><Content /></Den.Components.VMask>
+
+// Iframe
+<Den.Components.VFrame src="https://example.com" />
+
+// Theme
+<Den.Components.VTheme category={Den.Components.ThemeCategory.Light}>
+  <App />
+</Den.Components.VTheme>
+
+// Loading indicator
+<Den.Components.VLoading />
+
+// Error boundary
+<Den.Components.VErrorBoundary>
+  <RiskyComponent />
+</Den.Components.VErrorBoundary>
+```
+
+---
+
+## Network Module (App/Append variants only)
+
+### Bootstrap Configuration
+
+Before using network features, initialize the bootstrap:
+
+```tsx
+import { Den } from '@fewbox/den-app';
+
+Den.boot({
+  getToken: () => localStorage.getItem('token') || '',
+  getAppSettings: () => ({
+    endpoint: {
+      PROTOCOL: 'https',
+      HOST: 'api.example.com',
+      PORT: '',
+      BASEPATH: '/v1'
+    },
+    externalService: {
+      PROTOCOL: 'https',
+      HOST: 'external.com',
+      PORT: '',
+      BASEPATH: '/api'
+    }
+  }),
+  getLanguages: (lang) => ({ /* i18n messages */ }),
+  getHeaders: () => ({ 'X-Custom-Header': 'value' }),
+  handleIsNotSuccessful: (data) => console.error('API error:', data),
+  handleError: (error) => console.error(error),
+  handleWarning: (error) => console.warn(error),
+  handleNetworkError: (error) => console.error('Network error:', error),
+  isDebug: process.env.NODE_ENV === 'development'
+});
+
+// Or use the Boot component:
+<Den.Components.Boot options={bootOptions}><App /></Den.Components.Boot>
+```
+
+### HTTP Clients (Observable-based for Redux Observable)
+
+All network clients return RxJS Observables for use in Redux Observable epics:
+
+```tsx
+import { Den } from '@fewbox/den-app';
+
+// GET, POST, PUT, PATCH, DELETE (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);
+
+// External endpoint (bypasses app settings)
+new Den.Network.GetFetchExternal('externalService', '/data', processAction);
+
+// GraphQL
+new Den.Network.GQL({ query: 'query { users { id name } }' }, processAction);
+new Den.Network.GQLExternal('externalService', { query: 'mutation { createUser(name: "test") { id } }' }, processAction);
+
+// Server-Sent Events
+new Den.Network.GetSSE('/events', processAction);
+
+// WebSocket
+new Den.Network.WS({ url: 'wss://example.com/ws' });
+```
+
+### Redux Observable Epic Pattern
+
+```tsx
+import { ofType } from 'redux-observable';
+import { switchMap } from 'rxjs/operators';
+
+const fetchUsersEpic = (action$) =>
+  action$.pipe(
+    ofType('FETCH_USERS'),
+    switchMap(() =>
+      new Den.Network.GetFetch('/users', (payload) => ({
+        type: 'USERS_LOADED',
+        payload
+      }))
+    )
+  );
+```
+
+### Retry Behavior
+
+- **Network errors** (timeout, CORS, DNS): retry 3x with 1s, 2s, 4s delays
+- **4xx client errors**: no retry (immediate failure)
+- **5xx server errors**: retry with exponential backoff
+
+---
+
+## Styling Guide
+
+### CSS Variables
+
+All CSS variables use the `--den-` prefix. Override in your root stylesheet:
+
+```css
+:root {
+  --den-font-color: #333;
+  --den-primary-color: #6200ea;
+}
+```
+
+### Importing Styles
+
+```scss
+@import 'fewbox-den/templates/style/variables';
+@import 'fewbox-den/templates/style/root-properties';
+@import 'fewbox-den/templates/style/core';
+```
+
+### Border Directions (DirectionType)
+
+```
+All, Top, Right, Bottom, Left,
+ExceptTop, ExceptRight, ExceptBottom, ExceptLeft,
+RightTop, RightBottom, LeftTop, LeftBottom, TopBottom, LeftRight
+```
+
+### Border Radius (BorderRadiusType)
+
+```tsx
+Den.Components.BorderRadiusType.Default   // default radius from CSS variable
+Den.Components.BorderRadiusType.Fixed     // fixed radius
+Den.Components.BorderRadiusType.Max       // maximum rounding (pill shape)
+```
+
+---
+
+## Common Patterns
+
+### Page Layout (header + content + footer)
+
+```tsx
+<Den.Components.Y height="100vh">
+  <Den.Components.VBoundary padding="1em" backgroundColor={Den.Components.ColorType.Primary}>
+    <Header />
+  </Den.Components.VBoundary>
+  <Den.Components.VBoundary selfGrow={1} overflow="auto" padding="1em">
+    <MainContent />
+  </Den.Components.VBoundary>
+  <Den.Components.VBoundary padding="1em" backgroundColor={Den.Components.ColorType.Dark}>
+    <Footer />
+  </Den.Components.VBoundary>
+</Den.Components.Y>
+```
+
+### Centered Content
+
+```tsx
+<Den.Components.XCenter height="100%">
+  <Den.Components.SCenter><Content /></Den.Components.SCenter>
+</Den.Components.XCenter>
+```
+
+### Sidebar Layout
+
+```tsx
+<Den.Components.X height="100vh">
+  <Den.Components.VBoundary width="250px" backgroundColor={Den.Components.ColorType.Dark}>
+    <Sidebar />
+  </Den.Components.VBoundary>
+  <Den.Components.VBoundary selfGrow={1}><MainContent /></Den.Components.VBoundary>
+</Den.Components.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>
+```
+
+### Form with Validation
+
+```tsx
+<Den.Components.VForm
+  handleSubmit={(data) => api.login(data.form)}
+  handleValidateError={(input) => { input.focus(); input.scrollIntoView({ behavior: 'smooth' }); }}>
+  <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>
+```
+
+### Card Grid (app variant)
+
+```tsx
+<Den.Components.XWrapEvenly gap="1em" padding="1em">
+  {items.map(item => (
+    <Den.Components.VCardMedia
+      key={item.id}
+      width="300px"
+      borderRadius="0.5em"
+      borderColor={Den.Components.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} />}
+    />
+  ))}
+</Den.Components.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}>
+      <TopLeftContent />
+    </Den.Components.Position>
+    <Den.Components.Position category={Den.Components.PositionCategory.Area} type={Den.Components.PositionType.Center}>
+      <CenterContent />
+    </Den.Components.Position>
+  </Den.Components.VBoundary>
+</Den.Components.PositionArea>
+```
+
+### Responsive Layout
+
+```tsx
+<Den.Components.Responsive
+  breakpointType={Den.Components.BreakpointType.Medium}
+  desktop={<Den.Components.X gap="1em">
+    <Sidebar />
+    <MainContent />
+  </Den.Components.X>}
+  mobile={<Den.Components.Y gap="1em">
+    <MainContent />
+  </Den.Components.Y>}
+/>
+```
+
+---
+
+## Tips
+
+1. Prefer semantic layout components (XCenter, YBetween) over manual Flexbox.
+2. Use `gap` prop on X/Y instead of margins on children.
+3. Nest X and Y freely for complex layouts.
+4. Use S-components inside X/Y to override individual child alignment.
+5. Form names use dot notation: `name="form.user.email"` -> `{ form: { user: { email: "..." } } }`.
+6. `selfGrow={1}` fills remaining space (flex-grow: 1).
+7. VBoundary is the safe default container.
+8. All components forward standard HTML attributes (onClick, id, aria-*, data-*).
+9. Display/PositionArea use `cloneElement` — children must accept `className` prop.
+10. Use `height`/`width` as direct props (not in `style`) for highest CSS priority.