@fewbox/den-web 0.2.0-preview.44 → 0.2.0-preview.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewbox/den-web",
-  "version": "0.2.0-preview.44",
+  "version": "0.2.0-preview.45",
   "main": "index.js",
   "types": "index-web.d.ts",
   "repository": "https://github.com/FewBox/fewbox-den.git",

package/scripts/copy-templates.js

@@ -2,7 +2,9 @@ import { fileURLToPath } from 'url';
 import fs from 'fs';
 import path from 'path';
 
-const copyFolderAsync = (source, target) => {
+const OVERWRITE_LIST = [path.join('.claude', 'skills') + path.sep];
+
+const copyFolderAsync = (source, target, rootSource) => {
     fs.mkdirSync(target, { recursive: true });
     const entries = fs.readdirSync(source, { withFileTypes: true });
     for (let entry of entries) {
@@ -10,11 +12,17 @@ const copyFolderAsync = (source, target) => {
         const destPath = path.join(target, entry.name);
 
         if (entry.isDirectory()) {
-            copyFolderAsync(srcPath, destPath);
+            copyFolderAsync(srcPath, destPath, rootSource);
         } else {
-            if (fs.existsSync(destPath)) {
+            const rel = path.relative(rootSource, srcPath);
+            const forceOverwrite = OVERWRITE_LIST.some(prefix => rel.startsWith(prefix));
+            const exists = fs.existsSync(destPath);
+            if (exists && !forceOverwrite) {
                 console.log(`You should merge '${destPath}' manually!`);
             } else {
+                if (exists) {
+                    console.log(`Overwriting '${destPath}' with latest version.`);
+                }
                 fs.copyFileSync(srcPath, destPath);
             }
         }
@@ -26,4 +34,4 @@ const rootdir = path.dirname(__filename);
 const projectRoot = process.env.INIT_CWD || process.cwd();
 const templateDir = path.join(rootdir, '../templates');
 
-copyFolderAsync(templateDir, projectRoot);
+copyFolderAsync(templateDir, projectRoot, templateDir);

package/src/components/View/VInput/VCheckBox/index.d.ts

@@ -1,6 +1,10 @@
+import { Property } from 'csstype';
 import { IBaseInputProps } from "..";
 export interface IVCheckBoxProps extends IBaseInputProps {
     isChecked?: boolean;
+    checkedSvg?: React.ReactNode;
+    uncheckedSvg?: React.ReactNode;
+    svgSize?: Property.Height;
 }
 declare const VCheckBox: (props: IVCheckBoxProps) => React.JSX.Element;
 export default VCheckBox;

package/src/components/View/VInput/VRadio/index.d.ts

@@ -1,6 +1,10 @@
+import { Property } from 'csstype';
 import { IBaseInputProps } from "..";
 export interface IVRadioProps extends IBaseInputProps {
     isChecked?: boolean;
+    checkedSvg?: React.ReactNode;
+    uncheckedSvg?: React.ReactNode;
+    svgSize?: Property.Height;
 }
 declare const VRadio: (props: IVRadioProps) => React.JSX.Element;
 export default VRadio;

package/src/components/View/VSwitch/index.d.ts

@@ -1,8 +1,15 @@
+import { Property } from 'csstype';
+import { FullGapType, FullPaddingType } from '../../Engine';
 import { IBaseProps, IBaseStates } from '../../Engine/Base';
 export interface IVSwitchProps extends IBaseProps {
     isOn: boolean;
     icon?: React.JSX.Element;
-    gap?: string;
+    onIcon?: React.JSX.Element;
+    offIcon?: React.JSX.Element;
+    thumbSvg?: React.ReactNode;
+    thumbSize?: Property.Height;
+    trackPadding?: FullPaddingType;
+    gap?: FullGapType;
     isDisabled?: boolean;
     onSwitch?: (isOn: boolean) => void;
 }

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

@@ -64,7 +64,7 @@ All components extend `IBaseProps` (which extends `IViewProps`) providing these
 | `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 |
+| `lineHeight` | `LineHeightType \| Property.LineHeight` | Line height preset or custom CSS value |
 | `selfShrink` | `number` | flex-shrink for the component itself |
 | `selfGrow` | `number` | flex-grow for the component itself |
 | `selfBasis` | `string` | flex-basis for the component itself |
@@ -165,6 +165,14 @@ GapType.Default | .Normal | .ExtraSmall | .Small | .Large | .ExtraLarge
 // Letter Spacing
 LetterSpacingType.Default | .Normal | .ExtraSmall | .Small | .Large | .ExtraLarge
 
+// Line Height (Apple HIG-inspired scale)
+LineHeightType.Default       // inherits
+LineHeightType.Normal        // 1.0
+LineHeightType.ExtraSmall    // 1.15
+LineHeightType.Small         // 1.25
+LineHeightType.Large         // 1.35
+LineHeightType.ExtraLarge    // 1.45
+
 // Opacity
 OpacityType._0 | ._10 | ._20 | ._25 | ._30 | ._40 | ._50 | ._60 | ._70 | ._75 | ._80 | ._90 | ._100
 
@@ -495,6 +503,10 @@ Wrap a child in an S-component to override the parent's cross-axis alignment for
 
 // FlexItem also exports FlexItemAlignSelfType
 // Flex also exports FlexAlignContentType
+
+// Note: Flex does NOT set overflow by default (as of 2026-03).
+// Children can overflow the flex container unless you set overflow explicitly.
+// Pass `overflow={OverflowType.Hidden}` if you want clipping.
 ```
 
 ---
@@ -698,6 +710,16 @@ const [value, setValue] = useState('');
   )}
 />
 
+// Input-scoped color props (apply to the native <input> only, not the wrapper):
+<VTextBox
+  name="form.email"
+  frontColor={ColorType.Dark}           // wrapper text color; also applied to <input> if inputFrontColor is omitted
+  inputFrontColor={ColorType.Black}     // <input> text color (overrides frontColor on input)
+  inputBackgroundColor={ColorType.White} // <input> background color
+  placeholderColor={ColorType.Placeholder} // placeholder text color
+/>
+// Available on all VInput-based components (VTextBox, VEmail, VPassword, VNumber, VDate, VTextArea, VDropdown, etc.)
+
 // Other input types:
 <VEmail name="form.email" required placeholder="Email" />
 <VPassword name="form.password" placeholder="Password" />
@@ -725,10 +747,34 @@ const [value, setValue] = useState('');
   frontColor={ColorType.Primary}
 />
 
+// Checkbox with custom SVG icons and size override.
+// checkedSvg/uncheckedSvg replace the built-in checkbox icons.
+// svgSize sets the inline height on VSvg, overriding --den-v-svg-size (default 2.2em).
+<VCheckBox
+  name="form.liked"
+  label="Like"
+  isChecked={liked}
+  checkedSvg={<LikeFilledSvg />}
+  uncheckedSvg={<LikeOutlineSvg />}
+  svgSize="1.2em"
+  frontColor={ColorType.Error}
+/>
+
 // Radio
 <VRadio id="opt1" name="form.option" value="A" label="Option A" />
 <VRadio id="opt2" name="form.option" value="B" label="Option B" />
 
+// Radio also accepts checkedSvg / uncheckedSvg / svgSize (same API as VCheckBox).
+<VRadio
+  name="form.option"
+  value="A"
+  label="Option A"
+  isChecked={selected === 'A'}
+  checkedSvg={<StarFilledSvg />}
+  uncheckedSvg={<StarOutlineSvg />}
+  svgSize="1.2em"
+/>
+
 // Radio Group (managed state)
 <VGroup
   selectedValue="A"
@@ -772,6 +818,7 @@ const [value, setValue] = useState('');
   menuGap="4px"                   // gap between dropdown menu and trigger
   menuBackgroundColor={ColorType.White}
   menuZIndex={9999}
+  menuMaxHeight="300px"           // scrollable menu when items exceed height
   handleChange={(value) => console.log(value)}
   overWriteDropdownMenu={(items) => <CustomMenu items={items} />}   // custom menu renderer
   overWriteDropdownItem={(item) => <CustomItem item={item} />}      // custom item renderer
@@ -781,10 +828,28 @@ const [value, setValue] = useState('');
 // Switch
 <VSwitch
   isOn={true}
-  icon={<SwitchIcon />}
+  icon={<SwitchIcon />}      // shown on the empty side in BOTH states (legacy single-icon prop)
   onSwitch={(isOn) => console.log(isOn)}
 />
 
+// Switch with state-specific icons, custom thumb svg, custom thumb size, and track padding.
+// onIcon shows on the right when isOn=true, offIcon on the left when isOn=false.
+// onIcon/offIcon override `icon` when provided.
+// thumbSvg replaces the built-in switch knob graphic.
+// thumbSize sets the inline height on the thumb VSvg, overriding --den-v-svg-size.
+// trackPadding controls inner spacing between SVGs and the colored track edge
+// (default '0.2em'). Applied symmetrically — set to '0' for flush, larger values for roomier look.
+<VSwitch
+  isOn={isOn}
+  onSwitch={setIsOn}
+  onIcon={<SunSvg />}
+  offIcon={<MoonSvg />}
+  thumbSvg={<StarSvg />}
+  thumbSize="1.5em"
+  trackPadding="0.4em"
+  frontColor={ColorType.Success}
+/>
+
 // File upload
 <VFile
   name="form.avatar"
@@ -792,6 +857,23 @@ const [value, setValue] = useState('');
   accept=".jpg,.png"
   appearance={<UploadIcon />}     // Custom trigger element
 />
+
+// Custom preview (sync or async) — e.g., render a cached image gallery.
+// `reload` re-triggers renderPreview (e.g., after cache refresh).
+<VFile
+  name="form.photos"
+  multiple
+  renderPreview={(inputFiles, isLoading, reload) => (
+    <XWrapEvenly gap="0.5em">
+      {inputFiles.map((f, i) => (
+        <VImage key={i} src={f.objectUrl} category={ImageCategory.Squared} width="80px" />
+      ))}
+    </XWrapEvenly>
+  )}
+/>
+// renderPreview signature: (inputFiles: InputFile[], isLoading: boolean, reload: () => void) => JSX.Element | Promise<JSX.Element>
+// InputFile: { file: File; objectUrl?: string; ... }
+// Async renderPreview shows `appearance` as fallback until the promise resolves.
 // FileCategory enum available for file categories
 
 // File with base64 output