@fewbox/den 0.1.43 → 0.2.0-preview.21

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

@@ -25,45 +25,61 @@ 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** (`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/VNav/VMain/VAside/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 Concepts
 
-### Common Props (IBaseProps)
+### Common Props (IViewProps / IBaseProps)
 
-All components extend `IBaseProps` which provides these shared props:
+All components extend `IBaseProps` (which extends `IViewProps`) providing these shared props:
 
 | Prop | Type | Description |
 |------|------|-------------|
 | `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 |
-| `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 |
+| `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 |
 | `isDefaultValue` | `boolean` | Apply default transparency and color resets |
+| `pseudoType` | `PseudoType` | Pseudo element target (All, Before, After) |
+| `pseudoFrontColor` | `ColorType \| string` | Pseudo element foreground color |
+| `pseudoBackgroundColor` | `ColorType \| string` | Pseudo element background color |
+| `pseudoBorderColor` | `ColorType \| string` | Pseudo element border color |
+| `pseudoBorderDirection` | `DirectionType` | Pseudo element border direction |
+| `customAttributes` | `Object` | Custom HTML attributes to spread |
 
 ### Color System (ColorType)
 
@@ -87,7 +103,7 @@ ColorType.Border        // border color
 ColorType.Placeholder   // placeholder color
 ColorType.Transparent   // transparent
 
-// Each color has opacity variants:
+// Each color has opacity variants (Light, Dark, Primary, Secondary, Tertiary, Info, Success, Warning, Error, Border, Placeholder):
 ColorType.Primary75     // 75% opacity
 ColorType.Primary50     // 50% opacity
 ColorType.Primary25     // 25% opacity
@@ -96,10 +112,10 @@ ColorType.Primary25     // 25% opacity
 ### Font Size System (FontSizeType)
 
 ```tsx
+FontSizeType.Default
+FontSizeType.Normal
 FontSizeType.ExtraSmall
 FontSizeType.Small
-FontSizeType.Normal
-FontSizeType.Default
 FontSizeType.Large
 FontSizeType.ExtraLarge
 
@@ -128,6 +144,48 @@ FontWeightType.ExtraBold     // 800
 FontWeightType.Black         // 900
 ```
 
+### Preset Enums (class-based styling)
+
+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
+BorderRadiusType.Default | .Normal | .ExtraSmall | .Small | .Large | .ExtraLarge | .Max
+
+// Border Style
+BorderStyleType.None | .Solid | .Dashed | .Dotted | .Double | .Groove | .Ridge | .Inset | .Outset | .Hidden
+
+// Border Width
+BorderWidthType.Default | .Normal | .ExtraSmall | .Small | .Large | .ExtraLarge
+
+// Padding
+PaddingType.Default | .Normal | .ExtraSmall | .Small | .Large | .ExtraLarge
+
+// Margin
+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
+
+// Display
+DisplayType.None | .Block | .Inline | .InlineBlock | .Flex | .InlineFlex | .Grid | .InlineGrid | .Table | .TableRow | .TableCell | .Contents | .FlowRoot
+
+// Visibility
+VisibilityType.Visible | .Hidden | .Collapse
+
+// Cursor
+CursorType.Auto | .Default | .None | .Pointer | .Wait | .Text | .Move | .NotAllowed | .Grab | .Grabbing | ... (30+ options)
+
+// Overflow / OverflowX / OverflowY
+OverflowType.Visible | .Hidden | .Scroll | .Auto | .Clip
+```
+
 ---
 
 ## Layout Components
@@ -244,17 +302,13 @@ Wrap a child in an S-component to override the parent's cross-axis alignment for
   </Den.Components.STop>
 </Den.Components.XCenter>
 
-// In X containers (cross-axis is vertical):
+// 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.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.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
 ```
@@ -263,7 +317,6 @@ Wrap a child in an S-component to override the parent's cross-axis alignment for
 
 ```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}>
@@ -331,60 +384,59 @@ Wrap a child in an S-component to override the parent's cross-axis alignment for
 </Den.Components.Dock>
 ```
 
-### Display (Responsive Show/Hide)
+### BreakpointDisplay (Responsive Show/Hide)
 
-**Important:** Display uses `cloneElement` to inject className — child must accept `className` prop.
+**Important:** BreakpointDisplay uses `cloneElement` to inject className — child must accept `className` prop.
 
 ```tsx
-// DisplayCategory: Visiable, Hidden
-// DisplayType: Only, Up, Down
+// BreakpointCategory: Visible, Hidden
+// BreakpointType: Only, Up, Down
+// ScreenSizeType: ExtraSmall, Small, Medium, Large, ExtraLarge, ExtraExtraLarge
 
 // Always visible
-<Den.Components.Display category={Den.Components.DisplayCategory.Visiable}>
+<Den.Components.BreakpointDisplay category={Den.Components.BreakpointCategory.Visible}>
   <div>Always shown</div>
-</Den.Components.Display>
+</Den.Components.BreakpointDisplay>
 
 // Always hidden
-<Den.Components.Display category={Den.Components.DisplayCategory.Hidden}>
+<Den.Components.BreakpointDisplay category={Den.Components.BreakpointCategory.Hidden}>
   <div>Always hidden</div>
-</Den.Components.Display>
+</Den.Components.BreakpointDisplay>
 
 // Responsive: visible only on Medium breakpoint
-<Den.Components.Display
-  category={Den.Components.DisplayCategory.Visiable}
-  type={Den.Components.DisplayType.Only}
-  breakpoint={Den.Components.BreakpointType.Medium}
+<Den.Components.BreakpointDisplay
+  category={Den.Components.BreakpointCategory.Visible}
+  type={Den.Components.BreakpointType.Only}
+  breakpoint={Den.Components.ScreenSizeType.Medium}
 >
   <div>Medium only</div>
-</Den.Components.Display>
+</Den.Components.BreakpointDisplay>
 
 // Hidden on Small and below
-<Den.Components.Display
-  category={Den.Components.DisplayCategory.Hidden}
-  type={Den.Components.DisplayType.Down}
-  breakpoint={Den.Components.BreakpointType.Small}
+<Den.Components.BreakpointDisplay
+  category={Den.Components.BreakpointCategory.Hidden}
+  type={Den.Components.BreakpointType.Down}
+  breakpoint={Den.Components.ScreenSizeType.Small}
 >
   <div>Hidden on mobile</div>
-</Den.Components.Display>
+</Den.Components.BreakpointDisplay>
 
 // Multiple breakpoints (array):
-<Den.Components.Display
-  category={Den.Components.DisplayCategory.Visiable}
-  breakpoint={[Den.Components.BreakpointType.Small, Den.Components.BreakpointType.Large]}
+<Den.Components.BreakpointDisplay
+  category={Den.Components.BreakpointCategory.Visible}
+  breakpoint={[Den.Components.ScreenSizeType.Small, Den.Components.ScreenSizeType.Large]}
 >
   <div>Visible on Small and Large</div>
-</Den.Components.Display>
-
-// BreakpointType: ExtraSmall, Small, Medium, Large, ExtraLarge, ExtraExtraLarge
+</Den.Components.BreakpointDisplay>
 ```
 
 ### Responsive (Desktop/Mobile Switch)
 
 ```tsx
 // Shorthand for showing desktop or mobile content based on breakpoint.
-// Children must accept className prop (uses Display internally).
+// Children must accept className prop (uses BreakpointDisplay internally).
 <Den.Components.Responsive
-  breakpointType={Den.Components.BreakpointType.Medium}
+  breakpointType={Den.Components.ScreenSizeType.Medium}
   desktop={<div>Desktop layout</div>}
   mobile={<div>Mobile layout</div>}
 />
@@ -402,11 +454,11 @@ Wrap a child in an S-component to override the parent's cross-axis alignment for
 
 // 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)
+// 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)
@@ -427,6 +479,9 @@ Wrap a child in an S-component to override the parent's cross-axis alignment for
 <Den.Components.FlexItem grow={1} shrink={0} basis="200px" order={2}>
   <Content />
 </Den.Components.FlexItem>
+
+// FlexItem also exports FlexItemAlignSelfType
+// Flex also exports FlexAlignContentType
 ```
 
 ---
@@ -497,6 +552,18 @@ For inline text. Renders as `<span>` by default, configurable to any inline/head
 // 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).
+<Den.Components.VLabel
+  category={Den.Components.LabelCategory.H1}
+  fontWeight={Den.Components.FontWeightType.Thin}
+  caption="Thin H1"
+/>
 ```
 
 ### VText (Block Text)
@@ -548,9 +615,10 @@ For block-level text (p, article, section, etc.):
     // e.g., { form: { username: "value", password: "value" } }
     console.log(data);
   }}
-  handleValidateError={(input) => {
+  handleValidateError={(invalidInputs) => {
     // Called when HTML5 validation fails
-    input.focus();
+    // invalidInputs is HTMLInputElement[]
+    invalidInputs[0]?.focus();
   }}
 >
   <Den.Components.Y gap="0.5em">
@@ -559,6 +627,26 @@ For block-level text (p, article, section, etc.):
     <Den.Components.VSubmit caption="Submit" />
   </Den.Components.Y>
 </Den.Components.VForm>
+
+// HandleSubmitCategory: Json (default), FormData
+// Use FormData category to receive raw FormData instead of parsed JSON:
+<Den.Components.VForm
+  handleSubmitCategory={Den.Components.HandleSubmitCategory.FormData}
+  handleSubmit={(formData) => { /* formData is FormData */ }}
+>
+  ...
+</Den.Components.VForm>
+```
+
+#### VActionForm (Simple Form)
+
+A simple `<form>` wrapper without JSON conversion or validation handling:
+
+```tsx
+<Den.Components.VActionForm action="/api/submit" method="POST">
+  <input name="field" />
+  <button type="submit">Submit</button>
+</Den.Components.VActionForm>
 ```
 
 **Form data naming conventions:**
@@ -604,6 +692,8 @@ const [value, setValue] = useState('');
 <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" />
@@ -626,6 +716,19 @@ const [value, setValue] = useState('');
 <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" />
 
+// Radio Group (managed state)
+<Den.Components.VGroup
+  selectedValue="A"
+  renderGroup={(selectedValue, handleSelect) => (
+    <>
+      <Den.Components.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"
+        isChecked={selectedValue === 'B'} onChange={handleSelect} />
+    </>
+  )}
+/>
+
 // Hidden field
 <Den.Components.VHidden name="form.id" value="123" />
 
@@ -638,6 +741,7 @@ const [value, setValue] = useState('');
   ]}
   value="us"
 />
+// ISelectItemData: { caption: string; value: string }
 
 // Dropdown (custom dropdown with icons)
 <Den.Components.VDropdown
@@ -650,8 +754,16 @@ 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={Den.Components.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
@@ -667,6 +779,7 @@ const [value, setValue] = useState('');
   accept=".jpg,.png"
   appearance={<UploadIcon />}     // Custom trigger element
 />
+// FileCategory enum available for file categories
 
 // File with base64 output
 <Den.Components.VBase64File
@@ -682,6 +795,9 @@ const [value, setValue] = useState('');
   backgroundColor={Den.Components.ColorType.Primary}
   frontColor={Den.Components.ColorType.White}
 />
+
+// Submit wrapper (wraps custom body with hidden submit input)
+<Den.Components.VSubmitWrapper body={<button>Custom Submit UI</button>} />
 ```
 
 ### Media Components
@@ -702,6 +818,7 @@ import IconSvg from './icon.svg';
 >
   <IconSvg />
 </Den.Components.VSvg>
+// SvgCategory enum available for SVG categories
 
 // Background image
 <Den.Components.VBackground
@@ -759,11 +876,27 @@ import IconSvg from './icon.svg';
 
 ```tsx
 <Den.Components.VEllipse width="100px" height="100px" backgroundColor={Den.Components.ColorType.Primary} />
+// EllipseCategory enum available
+
 <Den.Components.VRectangle width="200px" height="50px" backgroundColor={Den.Components.ColorType.Info} />
+
 <Den.Components.VLine />
+// LineCategory enum available
+
 <Den.Components.VShadow category={Den.Components.ShadowCategory.Small}><Content /></Den.Components.VShadow>
 ```
 
+### VTheme (Theme Provider)
+
+```tsx
+<Den.Components.VTheme category={Den.Components.ThemeCategory.Light}>
+  <App />
+</Den.Components.VTheme>
+
+// ThemeCategory: Light, Dark (or custom)
+// ThemeVariables type available for typed CSS variable overrides
+```
+
 ### App-only Components (app variant)
 
 ```tsx
@@ -782,6 +915,9 @@ import IconSvg from './icon.svg';
   foot={<button>Action</button>}
 />
 
+// VCardSocial — social media card variant
+<Den.Components.VCardSocial ... />
+
 // VCardWindow — card with background image
 <Den.Components.VCardWindow
   backgroundUrl="/bg.jpg"
@@ -806,6 +942,21 @@ import IconSvg from './icon.svg';
 
 // VTree — hierarchical tree view
 <Den.Components.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}
+  src="/photo.jpg"
+  width="100%"
+  height="300px"
+/>
+// PhotoCategory: Auto, Contain, Cover
+// PhotoPositionType: Left, Center, Right
+
+// VAvatar — user avatar display
+<Den.Components.VAvatar ... />
 
 // VDynamic — renders component by name from registry
 <Den.Components.VDynamic
@@ -816,12 +967,54 @@ import IconSvg from './icon.svg';
 />
 ```
 
+### Web-only Components (web variant)
+
+```tsx
+// Debug utility component
+<Den.Components.Debug ... />
+
+// Google Font loader
+<Den.Components.VGoogleFont
+  type={Den.Components.GoogleFontType...}
+  ...
+/>
+// GoogleFontType, IGoogleTypeface, IGoogleFont types available
+
+// Chrome extension validation
+<Den.Components.VChromeExtensionValidator ... />
+// ExtensionStatus enum exported
+
+// Auth components
+<Den.Components.GoogleGrant
+  category={Den.Components.GoogleGrantCategory.Implicit}
+  uxMode={Den.Components.GoogleGrantUXMode.Popup}
+  ...
+/>
+// GoogleGrantCategory: Implicit, AuthorizationCode
+// GoogleGrantUXMode: Popup, Redirect
+// GoogleGrantCode, GoogleGrantToken types exported
+
+<Den.Components.GoogleSignin
+  uxMode={Den.Components.GoogleSigninUXMode...}
+  ...
+/>
+
+<Den.Components.FigmaSignin ... />
+<Den.Components.WeComSignin ... />
+
+// JWT utility
+Den.Components.parseJWT(token)  // returns IUserProfile
+// IUserProfile type exported
+```
+
 ### Other View Components
 
 ```tsx
 // Semantic HTML wrappers
 <Den.Components.VHeader>...</Den.Components.VHeader>
+<Den.Components.VNav>...</Den.Components.VNav>
 <Den.Components.VMain>...</Den.Components.VMain>
+<Den.Components.VAside>...</Den.Components.VAside>
 <Den.Components.VFooter>...</Den.Components.VFooter>
 <Den.Components.VSection>...</Den.Components.VSection>
 <Den.Components.VHR />
@@ -832,11 +1025,6 @@ import IconSvg from './icon.svg';
 // 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 />
 
@@ -846,6 +1034,13 @@ import IconSvg from './icon.svg';
 </Den.Components.VErrorBoundary>
 ```
 
+### Utility Functions (core)
+
+```tsx
+// Convert FormData to nested JSON (used internally by VForm)
+Den.Components.convertFormDataToJson(formData)
+```
+
 ---
 
 ## Network Module (App/Append variants only)
@@ -857,7 +1052,7 @@ Before using network features, initialize the bootstrap:
 ```tsx
 import { Den } from '@fewbox/den-app';
 
-Den.boot({
+Den.FewBox.boot({
   getToken: () => localStorage.getItem('token') || '',
   getAppSettings: () => ({
     endpoint: {
@@ -876,42 +1071,147 @@ Den.boot({
   getLanguages: (lang) => ({ /* i18n messages */ }),
   getHeaders: () => ({ 'X-Custom-Header': 'value' }),
   handleIsNotSuccessful: (data) => console.error('API error:', data),
-  handleError: (error) => console.error(error),
+  handleError: (error) => console.error(error),      // IError: { summary, data }
   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>
+<Den.Components.Boot options={bootOptions} />
+
+// Types exported from Den.FewBox:
+// IFewBoxOptions, IAppSettings, IEndpoint, IError, BootClass
 ```
 
-### HTTP Clients (Observable-based for Redux Observable)
+### Fetch-based HTTP Clients (Observable-based for Redux Observable)
 
-All network clients return RxJS Observables for use in Redux Observable epics:
+All Fetch 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)
+// 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);
 
-// External endpoint (bypasses app settings)
+// 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);
+```
+
+### AJAX-based HTTP Clients
+
+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);
+
+// 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);
+
+// 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);
+// External text variants: GetTextExternal, PostTextExternal, PutTextExternal, PatchTextExternal, DeleteTextExternal
+
+// Local storage
+new Den.Network.GetLocal('/local-path', processAction);
+```
+
+### GraphQL
 
-// GraphQL
+```tsx
+// Default endpoint
 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
+// External endpoint
+new Den.Network.GQLExternal('externalService', { query: 'mutation { ... }' }, processAction);
+
+// File upload
+new Den.Network.GQLUpload({ query: '...', variables: { file } }, processAction);
+new Den.Network.GQLExternalUpload('externalService', { query: '...' }, processAction);
+
+// IGraphQL type available for query/mutation objects
+```
+
+### 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);
+```
+
+### WebSocket
 
-// WebSocket
+```tsx
 new Den.Network.WS({ url: 'wss://example.com/ws' });
+// Den.Network.ws() function also available
+// IWebsocketOptions type exported
+```
+
+### Promise-based HTTP (non-Observable)
+
+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');
+
+// 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');
+```
+
+### Raw HTTP Verb Functions
+
+Low-level verb functions that return Observables:
+
+```tsx
+// Default: verbsGet, verbsPost, verbsPut, verbsPatch, verbsDelete
+// External: verbsGetExternal, verbsPostExternal, verbsPutExternal, verbsPatchExternal, verbsDeleteExternal
+// Internal: _verbsGet, _verbsPost, _verbsPut, _verbsPatch, _verbsDelete (with custom headers)
+// Internal Promise: _verbsGetPromise, _verbsPostPromise, etc.
+```
+
+### 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
 ```
 
 ### Redux Observable Epic Pattern
@@ -940,6 +1240,50 @@ const fetchUsersEpic = (action$) =>
 
 ---
 
+## Store Module (App/Append variants only)
+
+Type definitions for Redux store integration:
+
+```tsx
+import { Den } 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
+
+// Data types
+type Json = Den.Store.Json;                       // Generic JSON type
+type EnumDictionary<K, V> = Den.Store.EnumDictionary<K, V>; // Enum-keyed dictionary
+
+// Response wrappers
+type IMetaResponse = Den.Store.IMetaResponse;           // Response with metadata
+type IPayloadResponse = Den.Store.IPayloadResponse;     // Response with payload
+```
+
+---
+
+## Language Module (App/Append variants only)
+
+Internationalization utilities:
+
+```tsx
+import { Den } from '@fewbox/den-app';
+
+// Get browser language
+Den.Language.getBrowserLang();       // "en" (short code)
+Den.Language.getBrowserLangFull();   // "en-US" (full code)
+
+// Get formatted intl message (uses BootClass language config)
+Den.Language.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');
+```
+
+---
+
 ## Styling Guide
 
 ### CSS Variables
@@ -969,14 +1313,6 @@ 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
@@ -1035,7 +1371,7 @@ Den.Components.BorderRadiusType.Max       // maximum rounding (pill shape)
 ```tsx
 <Den.Components.VForm
   handleSubmit={(data) => api.login(data.form)}
-  handleValidateError={(input) => { input.focus(); input.scrollIntoView({ behavior: 'smooth' }); }}>
+  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" />
@@ -1084,7 +1420,7 @@ Den.Components.BorderRadiusType.Max       // maximum rounding (pill shape)
 
 ```tsx
 <Den.Components.Responsive
-  breakpointType={Den.Components.BreakpointType.Medium}
+  breakpointType={Den.Components.ScreenSizeType.Medium}
   desktop={<Den.Components.X gap="1em">
     <Sidebar />
     <MainContent />
@@ -1107,5 +1443,7 @@ Den.Components.BorderRadiusType.Max       // maximum rounding (pill shape)
 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.
+9. BreakpointDisplay/PositionArea use `cloneElement` — children must accept `className` prop.
 10. Use `height`/`width` as direct props (not in `style`) for highest CSS priority.
+11. Use preset enums (PaddingType, MarginType, etc.) for consistent spacing, or pass custom strings.
+12. Pseudo element styling is available via `pseudoType`, `pseudoFrontColor`, `pseudoBackgroundColor`, `pseudoBorderColor` props.