agent-flutter 0.1.25 → 0.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-flutter",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "Portable Flutter skill/rule pack initializer for multiple AI IDEs.",
   "type": "module",
   "bin": {

package/templates/shared/TEMPLATES.md

@@ -74,3 +74,30 @@ Finalize this feature:
 - Screenshot evidence: [No UI OR before/after]
 - Paired with: [Solo OR name]
 ```
+
+---
+
+## **5. Refactor Converted UI (Post-Convert)**
+
+Use this when code comes from convert script and needs production refactor:
+
+```text
+Refactor converted UI:
+- Source file: [e.g. lib/src/ui/home_demo_figma/home_demo_figma_page.dart]
+- Feature name: [e.g. home_demo]
+- Keep exact Figma visual: [yes/no]
+- Needs API integration now?: [yes/no]
+- Normalize/rename convert assets?: [yes/no]
+- Commit now?: [yes/no]
+- Push now?: [yes/no]
+- Create PR now?: [yes/no]
+- Priority fixes: [naming, localization, App* widgets, token cleanup, asset-rename, overflow]
+```
+
+Expected behavior:
+1. Apply `ui-refactor-convert.md` + `ui.md`.
+2. Rename generated classes/files to semantic names.
+3. Normalize convert-generated asset folder and names, then update `AppAssets` usages.
+4. Replace hardcoded style/string with tokens + localization.
+5. Extract components and pass UI correctness gates.
+6. Ask and execute in order: commit -> push -> create PR.

package/templates/shared/rules/ci-cd-pr.md

@@ -21,7 +21,7 @@ This is the required "done" flow before feature handoff.
 6. If answer is `yes`, push branch to remote.
 7. Ask user explicitly: `Do you want me to create PR now? (yes/no)`
 8. If answer is `yes`, create PR with mandatory template sections.
-9. If any answer is `no`, stop at that step and return current status.
+9. If answer is `no` at any step, stop at that step and return current status.
 
 If any step is skipped, feature is not considered complete.
 
@@ -48,6 +48,6 @@ PR must follow `.github/pull_request_template.md` and include all sections:
 
 ## 6. Agent Behavior
 - After finishing UI/API tasks, agent must ask in order: commit -> push -> create PR.
-- Agent must execute only steps explicitly confirmed by user (`yes`).
+- Agent executes only steps explicitly confirmed by user (`yes`).
 - If user confirms all steps, agent returns PR URL as final output.
-- If user declines at any step, agent stops and returns current repository status.
+- If user declines at any step, agent stops and returns repository status.

package/templates/shared/rules/ui-refactor-convert.md

@@ -0,0 +1,138 @@
+---
+alwaysApply: false
+---
+# UI Refactor Rule for Convert Output (JSX/Figma -> Dart)
+
+## 1. Goal
+Turn generated UI code into production-ready Flutter code that fully complies with `ui.md`.
+
+This rule applies after running convert scripts (for example files like `home_demo_figma_page.dart` and generated component trees), especially when convert output creates non-standard asset names/folders.
+
+## 1.1 Required References
+Always apply together with:
+- [ui.md](./ui.md)
+- [flutter-ui-widgets](../skills/flutter-ui-widgets/SKILL.md)
+- [flutter-assets-management](../skills/flutter-assets-management/SKILL.md)
+- [getx-localization-standard](../skills/getx-localization-standard/SKILL.md)
+- [dart-best-practices](../skills/dart-best-practices/SKILL.md)
+- [ci-cd-pr.md](./ci-cd-pr.md)
+
+If API data is involved, also apply:
+- [integration-api.md](./integration-api.md)
+- [dart-model-reuse](../skills/dart-model-reuse/SKILL.md)
+
+## 2. Trigger Conditions
+Use this rule when at least one condition is true:
+- Source file is generated by convert pipeline.
+- Class/file names are non-semantic (for example: `UhomeUdemoFigma`, `Frame123`).
+- Generated UI has hardcoded strings/colors/styles or deep nested widget trees.
+- Converted UI works visually but fails architecture/readability/maintainability standards.
+
+## 3. Refactor Workflow
+
+### Step 1: Normalize Structure and Naming
+- Keep page architecture:
+  - `lib/src/ui/<feature>/{binding,interactor,components}`
+- Rename generated class/file names to semantic names.
+- Keep page entry simple (`<feature>_page.dart` should not contain huge raw trees).
+
+### Step 2: Apply Design Tokens and Shared Widgets
+- Replace raw style values with:
+  - `AppColors`
+  - `AppStyles`
+  - `AppDimensions` and extensions (`n.width`, `n.height`)
+- Replace raw controls with existing `App*` widgets where applicable.
+- Keep exact Figma values when overriding tokens (radius/spacing/typography).
+
+### Step 3: Remove Convert Artifacts
+- Remove redundant wrappers (`ClipRRect + Container` duplicates, empty containers, unnecessary stacks).
+- Reduce deeply nested UI into clear sub-components under `components/`.
+- Add `const` where possible.
+- Avoid `Get.width` direct usage when local layout constraints are more correct (`LayoutBuilder`, `MediaQuery` scoped use).
+
+### Step 4: Localization and Content Cleanup
+- Move all user-facing text to `LocaleKey` + `.tr`.
+- Create/Update feature localization JSON files:
+  - `lib/src/locale/json/en/<feature>.json`
+  - `lib/src/locale/json/ja/<feature>.json`
+- Create/Update feature key module:
+  - `lib/src/locale/keys/<feature>_locale_key.dart`
+- Ensure `lang_en.dart` / `lang_ja.dart` only aggregate feature maps (do not inject random inline feature strings).
+- Ensure EN/JA JSON key parity for the refactored feature.
+- Do not keep demo/static strings inside production widget tree.
+- If temporary mock is needed, source it from `app_demo_data.dart`.
+
+### Step 5: State and Behavior Correctness
+- Ensure required states render correctly:
+  - `loading`, `success`, `empty`, `error` (plus `unauthorized` if relevant).
+- Ensure UI behavior is not only visual:
+  - tap handlers wired,
+  - enabled/disabled state clear,
+  - no broken interaction overlays.
+
+### Step 6: Asset and Icon Hygiene
+- Use `AppAssets` only (no raw asset path in widget code).
+- Keep icon/image naming consistent and avoid duplicates.
+- Verify SVG rendering without unexpected tint/color shift.
+- Normalize convert-generated asset folders and names:
+  - Detect non-standard convert folders (for example: `assets/figma/**`).
+  - Move/rename assets to feature-scoped locations:
+    - `assets/images/<feature>/**`
+    - `assets/images/icons/<feature>/**`
+  - Rename files to meaningful `snake_case` names based on feature and purpose.
+  - Replace convert-style asset constants in `lib/src/utils/app_assets.dart` with feature-scoped naming.
+  - Update all usages in Dart code to new `AppAssets` constants.
+  - Prevent cross-feature collisions (same filename/constant for different meanings).
+  - Keep shared assets explicitly under shared scope only when truly reused.
+  - Remove orphan/unused old asset files and constants.
+
+### Step 7: Verify and Prepare for PR
+- Run at minimum:
+  - `fvm flutter analyze`
+- Validate UI correctness gates from `ui.md`:
+  - responsive widths `320/390/430`
+  - text scale `1.0/1.3`
+  - no overflow warnings in debug logs
+
+### Step 8: Commit/Push/PR Confirmation (Mandatory)
+- After refactor verification, ask user in strict order:
+  1. `Do you want me to commit now? (yes/no)`
+  2. `Do you want me to push now? (yes/no)`
+  3. `Do you want me to create PR now? (yes/no)`
+- Execute only steps explicitly confirmed with `yes`.
+- If user answers `no` at any step, stop there and return current status.
+
+## 4. Mandatory Output of Refactor Task
+After refactor, output must include:
+- List of renamed files/classes.
+- List of extracted components.
+- List of localized keys added/updated.
+- Localization JSON files created/updated per feature (`en/ja`) and parity status.
+- List of token replacements (`raw -> AppColors/AppStyles/AppDimensions`).
+- Asset rename mapping (`old path/name -> new path/name`) and updated feature-scoped `AppAssets` constants.
+- Feature asset placement report (`feature -> directories/constants`) to prove no cross-feature mixing.
+- Commit/push/PR confirmation answers and execution results.
+- Remaining known gaps (if any) with exact file paths.
+
+## 5. Anti-Patterns (Do Not)
+- Do not keep generated class names in final code.
+- Do not leave hardcoded colors/text if a project token/key exists.
+- Do not keep feature localization inline in `lang_en.dart`/`lang_ja.dart` when feature JSON exists.
+- Do not keep unmatched keys between `json/en/<feature>.json` and `json/ja/<feature>.json`.
+- Do not keep convert-only asset naming/folders in final code if they violate project standard.
+- Do not place feature-specific assets in generic folders without feature namespace.
+- Do not reuse ambiguous asset constants across different features.
+- Do not parse API JSON directly in UI widgets.
+- Do not submit refactor that only changes formatting but leaves architectural violations.
+
+## 6. Prompt Template
+Use this prompt to trigger this rule:
+
+> Refactor converted UI using `ui-refactor-convert.md` + `ui.md`.
+> Source: `<path-to-generated-page-or-component>`.
+> Keep visual fidelity, but enforce architecture/tokens/localization/state correctness.
+> Extract reusable components and remove convert artifacts.
+> Normalize asset folder/naming by feature and update `AppAssets` with feature-scoped constants.
+> Split localization by feature JSON (en/ja) and update LocaleKey feature module.
+> Then ask: commit now? push now? create PR now?
+> Return changed files and verification checklist results.

package/templates/shared/rules/ui.md

@@ -67,18 +67,25 @@ alwaysApply: false
 
 ### **C. Localization (Priority P1)**
 - **No Raw Strings**: All user-facing text MUST be localized.
-- **Implementation**:
-  - Add keys to `lib/src/locale/locale_key.dart` (snake_case: `feature_screen_element`).
-  - Update **ALL** translation files (`lib/src/locale/lang_en.dart`, `lib/src/locale/lang_ja.dart`). Optional modularization by feature:
-    - `lib/src/locale/en/<feature>.dart`
-    - `lib/src/locale/ja/<feature>.dart`
-    - Aggregators `lang_en.dart` / `lang_ja.dart` merge feature maps to reduce conflicts when multiple tasks add keys while keeping `enUs` / `jaJp`.
-  - **Usage**: Use `.tr` extension.
- - **Integration**: `lib/src/locale/translation_manager.dart` consumes `enUs` and `jaJp`. **Do not rename** these variables in aggregators.
- - **Common Keys**:
-   - Create common modules: `lib/src/core/localization/en/common.dart` and `ja/common.dart`.
-   - Use `common_*` keys for widespread phrases (Save/Cancel/OK/Back/Next/Loading/Error/Retry…).
-   - When text matches common, **reuse** the common key instead of creating a feature key.
+- **JSON Per Feature (Required)**:
+  - Each feature must have its own JSON files:
+    - `lib/src/locale/json/en/<feature>.json`
+    - `lib/src/locale/json/ja/<feature>.json`
+  - One JSON file equals one function/feature scope. Do not mix multiple features in one JSON.
+  - Keep key parity between `en` and `ja` for the same feature.
+- **LocaleKey By Feature (Required)**:
+  - Split key declarations by feature:
+    - `lib/src/locale/keys/<feature>_locale_key.dart`
+  - `lib/src/locale/locale_key.dart` should act as barrel/aggregator entry for all feature key files.
+  - Key naming format remains snake_case with feature prefix: `feature_screen_element`.
+- **Aggregator Contract (Required)**:
+  - `lang_en.dart` and `lang_ja.dart` are aggregators that merge feature maps from JSON-derived modules.
+  - Do not hardcode new feature strings directly inside `lang_en.dart`/`lang_ja.dart` except app-level bootstrap keys.
+  - `translation_manager.dart` must keep consuming `enUs` and `jaJp` variables.
+- **Usage**: Use `.tr` extension with `LocaleKey`.
+- **Common Keys**:
+  - Maintain `common` localization as separate JSON modules (`common.json`) per language.
+  - Reuse common keys (`ok`, `cancel`, `loading`, `error`, ...) instead of duplicating per feature.
     ```dart
     // ✅ Correct
     Text(LocaleKey.home_title.tr);
@@ -119,6 +126,16 @@ alwaysApply: false
 - **Rule**: Follow the [Assets Management Skill](../skills/flutter-assets-management/SKILL.md) strictly.
 - **Naming**: MUST match Figma layer names in `snake_case`.
 - **Registry**: All assets MUST be defined in `lib/src/utils/app_assets.dart`.
+- **Feature-Scoped Assets (Required)**:
+  - Group assets by feature to avoid collisions/misuse:
+    - `assets/images/<feature>/...`
+    - `assets/images/icons/<feature>/...`
+  - Do not put new feature assets into generic/global folders unless truly shared.
+  - Shared cross-feature assets must live in explicit shared folder and use shared-prefixed constants.
+- **Feature-Scoped AppAssets Constants (Required)**:
+  - Constant names must include feature prefix (for example: `homeDemoIconBellSvg`, `visitRecordImgHeaderPng`).
+  - Prefer splitting asset declarations by feature module, with `app_assets.dart` as aggregator entry.
+  - When refactoring, replace old ambiguous constants with feature-scoped names.
 - **Usage**:
   ```dart
   // ✅ Correct
@@ -129,9 +146,10 @@ alwaysApply: false
   ```
 - **Workflow**:
   1. Rename layer in Figma to `snake_case`.
-  2. Export to `assets/images/` or `assets/icons/`.
-  3. Register path in `AppAssets`.
-  4. Use `AppAssets.name` in code.
+  2. Export to feature folder (`assets/images/<feature>/` or `assets/images/icons/<feature>/`).
+  3. Register path with feature-scoped constant in `AppAssets`.
+  4. Use `AppAssets.<featureScopedName>` in code.
+  5. Remove/replace old ambiguous asset names and unused files.
  - **SVG Hygiene (Priority P1)**:
    - Flatten stroke → fill để tint/recolor an toàn.
    - Remove mask/clip/filter phức tạp; đảm bảo `viewBox` 24×24 cho icon.
@@ -188,8 +206,16 @@ Follow these steps when creating a new UI screen:
 
 ### **Step 5: Localization**
 - **Identify Strings**: List all text in the new UI (See [GetX Localization Skill](../skills/getx-localization-standard/SKILL.md)).
-- **Update Keys**: Add entries to `locale_key.dart` (e.g., `my_feature_title`).
-- **Update Translations**: Add translations to `lang_en.dart`, `lang_ja.dart`.
+- **Create Feature JSON Files**:
+  - `lib/src/locale/json/en/<feature>.json`
+  - `lib/src/locale/json/ja/<feature>.json`
+- **Update Keys**:
+  - Add/update keys in `lib/src/locale/keys/<feature>_locale_key.dart`.
+  - Ensure `locale_key.dart` exports/aggregates the feature key module.
+- **Update Aggregators**:
+  - Merge new feature translations into `lang_en.dart` and `lang_ja.dart` via feature module maps.
+  - Ensure `enUs` and `jaJp` remain valid and synchronized.
+- **Parity Check**: `en` and `ja` JSON for the same feature must have identical key sets.
 
 ### **Step 6: Main Page Implementation**
 - Create `<page_name>_page.dart` (See [UI Widgets Skill](../skills/flutter-ui-widgets/SKILL.md)).
@@ -281,6 +307,12 @@ Follow these steps when creating a new UI screen:
 ## **4. Checklist Before PR**
 - [ ] No hardcoded colors/styles?
 - [ ] No raw strings? (Localization used)
+- [ ] **Localization JSON per feature created?** (`json/en/<feature>.json` + `json/ja/<feature>.json`)
+- [ ] **LocaleKey split by feature?** (`keys/<feature>_locale_key.dart`)
+- [ ] **EN/JA key parity passed?** (same keys between feature JSON files)
+- [ ] **lang_en/lang_ja are aggregator-only?** (no random inline feature strings)
+- [ ] **Assets grouped by feature?** (`assets/images/<feature>` and `assets/images/icons/<feature>`)
+- [ ] **AppAssets constants are feature-scoped?** (no ambiguous generic names)
 - [ ] Used `App*` widgets where possible?
 - [ ] Page broken down into `components/`?
 - [ ] Logic separated into `interactor/`?

package/templates/shared/tools/jsx2flutter/jsx2flutter.mjs

@@ -1,48 +1,20 @@
 import fs from 'node:fs'
 import path from 'node:path'
 import { createRequire } from 'node:module'
-import { fileURLToPath } from 'node:url'
 import { parse } from '@babel/parser'
 import traverseModule from '@babel/traverse'
 const traverse = traverseModule.default
 import postcss from 'postcss'
 import safeParser from 'postcss-safe-parser'
 
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
+const __dirname = path.dirname(new URL(import.meta.url).pathname)
 const require = createRequire(import.meta.url)
 let sass = null
 try {
   sass = require('sass')
 } catch {}
 
-function resolveProjectRoot() {
-  const fromCwd = process.cwd()
-  if (fs.existsSync(path.resolve(fromCwd, 'pubspec.yaml'))) {
-    return fromCwd
-  }
-  let current = __dirname
-  while (true) {
-    if (fs.existsSync(path.resolve(current, 'pubspec.yaml'))) {
-      return current
-    }
-    const parent = path.dirname(current)
-    if (parent === current) break
-    current = parent
-  }
-  return fromCwd
-}
-
-function readPackageName(projectRoot) {
-  const pubspecPath = path.resolve(projectRoot, 'pubspec.yaml')
-  if (!fs.existsSync(pubspecPath)) return 'app'
-  const content = fs.readFileSync(pubspecPath, 'utf8')
-  const matched = content.match(/^name:\s*([A-Za-z0-9_]+)/m)
-  return matched?.[1] || 'app'
-}
-
-const REPO_ROOT = resolveProjectRoot()
-const PROJECT_PACKAGE_NAME = readPackageName(REPO_ROOT)
+const REPO_ROOT = path.resolve(__dirname, '../..')
 const APP_ASSETS_FILE = path.resolve(REPO_ROOT, 'lib/src/utils/app_assets.dart')
 let ICONS_MAP = {}
 try {
@@ -745,6 +717,47 @@ function textAlignFromProps(props) {
   return null
 }
 
+function isInlineTextTag(tag) {
+  return tag === 'span' || tag === 'p'
+}
+
+function mergeTextStyles(baseStyle, ownStyle) {
+  if (baseStyle && ownStyle) return `(${baseStyle}).merge(${ownStyle})`
+  return ownStyle || baseStyle || null
+}
+
+function buildInlineTextSpans(el, cssMap, topClassName, skipRootDecoration, inheritedStyle = null) {
+  const className = getClassNameAttr(el)
+  const props = className && cssMap[className] ? cssMap[className] : {}
+  const style = mergeTextStyles(inheritedStyle, textStyleFromProps(props))
+  const spans = []
+  for (const c of el.children || []) {
+    if (isTextNode(c)) {
+      const text = c.value.trim()
+      if (!text) continue
+      const parts = [`text: ${toDartLiteral(text)}`]
+      if (style) parts.push(`style: ${style}`)
+      spans.push(`TextSpan(${parts.join(', ')})`)
+      continue
+    }
+    if (c.type !== 'JSXElement') continue
+    const childTag = jsxElementName(c).toLowerCase()
+    if (childTag === 'br') {
+      const parts = [`text: '\\n'`]
+      if (style) parts.push(`style: ${style}`)
+      spans.push(`TextSpan(${parts.join(', ')})`)
+      continue
+    }
+    if (isInlineTextTag(childTag)) {
+      spans.push(...buildInlineTextSpans(c, cssMap, topClassName, skipRootDecoration, style))
+      continue
+    }
+    const child = buildWidgetFromElement(c, cssMap, topClassName, skipRootDecoration)
+    spans.push(`WidgetSpan(child: ${child.widget})`)
+  }
+  return spans
+}
+
 function paddingFromProps(props) {
   const p = props['padding']
   const pt = props['padding-top']
@@ -881,15 +894,9 @@ function usesAppOwnedInputBackground(widget) {
   return normalized.startsWith('AppInput(') || normalized.startsWith('_GeneratedDateTimeField(')
 }
 
-function usesAppOwnedProgressBarBackground(widget) {
-  if (!widget) return false
-  const normalized = String(widget).trim()
-  return normalized.startsWith('AppProgressBar(')
-}
-
 function toDartLiteral(s) {
   const t = String(s || '')
-  return `'${t.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`
+  return `'${t.replace(/\\/g, '\\\\').replace(/\$/g, '\\$').replace(/'/g, "\\'")}'`
 }
 
 function isTextNode(node) {
@@ -1176,6 +1183,13 @@ function simplifySvgWidget(widget, size) {
   return `SizedBox(${width}${height}child: ${svgCall})`
 }
 
+function applySizeToWidget(widget, size) {
+  if (!size || (size.w == null && size.h == null)) return widget
+  const width = size.w != null ? `width: ${size.w}, ` : ''
+  const height = size.h != null ? `height: ${size.h}, ` : ''
+  return `SizedBox(${width}${height}child: ${widget})`
+}
+
 function shouldStripIconPositioning(size, position, rotate) {
   return (position != null || rotate != null) && isSmallIconSize(size)
 }
@@ -1297,92 +1311,6 @@ function buildRadioGroupWidgetFromElement(el, cssMap) {
   return `_GeneratedRadioGroup(${widgetArgs.join(', ')})`
 }
 
-function roundNumber(value, digits = 4) {
-  const factor = 10 ** digits
-  return Math.round(value * factor) / factor
-}
-
-function parsePaddingValues(props) {
-  const fromPadding = parseBoxValues(props['padding'])
-  if (fromPadding) return fromPadding
-  return {
-    top: cssPxToDouble(props['padding-top']) || 0,
-    right: cssPxToDouble(props['padding-right']) || 0,
-    bottom: cssPxToDouble(props['padding-bottom']) || 0,
-    left: cssPxToDouble(props['padding-left']) || 0,
-  }
-}
-
-function solidColorFromBackground(props) {
-  const bg = props['background-color'] || props['background']
-  if (!bg || /linear-gradient/i.test(String(bg))) return null
-  return cssColorToAppColor(bg)
-}
-
-function gradientOrSolidFromBackground(props) {
-  const bgSource = props['background-image'] || props['background']
-  if (bgSource && /linear-gradient/i.test(String(bgSource))) {
-    const gradient = parseLinearGradient(bgSource)
-    if (gradient) return gradient
-  }
-  const solid = solidColorFromBackground(props)
-  if (solid) return `LinearGradient(colors: [${solid}, ${solid}])`
-  return null
-}
-
-function buildProgressBarWidgetFromElement(el, cssMap) {
-  if (!el || !Array.isArray(el.children)) return null
-  const directElements = el.children.filter(c => c.type === 'JSXElement')
-  if (directElements.length !== 1) return null
-
-  const parentClass = getClassNameAttr(el)
-  const child = directElements[0]
-  const childClass = getClassNameAttr(child)
-  if (!parentClass || !childClass) return null
-
-  const parentProps = (cssMap && cssMap[parentClass]) ? cssMap[parentClass] : {}
-  const childProps = (cssMap && cssMap[childClass]) ? cssMap[childClass] : {}
-
-  const parentSize = normalizeGeneratedSize(sizeFromProps(parentProps))
-  const childSize = normalizeGeneratedSize(sizeFromProps(childProps))
-  if (childSize.w == null || childSize.h == null) return null
-
-  const hasProgressLikeBackground = !!solidColorFromBackground(parentProps)
-  const fillGradient = gradientOrSolidFromBackground(childProps)
-  if (!hasProgressLikeBackground || !fillGradient) return null
-
-  const padding = parsePaddingValues(parentProps)
-  let totalWidth = parentSize.w
-  if (totalWidth == null) {
-    const inferred = childSize.w + (padding.left || 0) + (padding.right || 0)
-    if (inferred > childSize.w) totalWidth = inferred
-  }
-  if (totalWidth == null || totalWidth <= 0) return null
-
-  let value = childSize.w / totalWidth
-  if (!Number.isFinite(value)) return null
-  if (value <= 0 || value > 1.05) return null
-  value = Math.max(0, Math.min(1, value))
-
-  const height = parentSize.h ?? childSize.h
-  if (height == null || height <= 0) return null
-
-  const backgroundColor = solidColorFromBackground(parentProps)
-  const radius = borderRadiusFromProps(parentProps) || borderRadiusFromProps(childProps)
-  const args = [
-    `value: ${roundNumber(value)}`,
-    `height: ${roundNumber(height, 2)}`,
-    `width: ${roundNumber(totalWidth, 2)}`,
-    `progressGradient: ${fillGradient}`,
-    'padding: 0',
-    'showDot: false',
-  ]
-  if (backgroundColor) args.push(`backgroundColor: ${backgroundColor}`)
-  if (radius) args.push(`borderRadius: ${radius}`)
-
-  return `AppProgressBar(${args.join(', ')})`
-}
-
 function wrapOverflowIfSized(body, size) {
   if (process.env.JSX2FLUTTER_ENABLE_OVERFLOW !== '1') return body
   if (!size || (!size.w && !size.h)) return body
@@ -1413,8 +1341,20 @@ function wrapOverflowIfSized(body, size) {
   return `OverflowBox(${overflowArgs.join(', ')}, child: ${body})`
 }
 
+function unwrapDirectFlexWidget(widgetExpr) {
+  let current = String(widgetExpr || '').trim()
+  while (/^(?:const\s+)?(?:Expanded|Flexible)\s*\(/.test(current)) {
+    const wrapperMatch = current.match(/^(?:const\s+)?(?:Expanded|Flexible)\s*\(([\s\S]*)\)$/)
+    if (!wrapperMatch) break
+    const childMatch = wrapperMatch[1].match(/\bchild:\s*([\s\S]+)$/)
+    if (!childMatch) break
+    current = childMatch[1].trim()
+  }
+  return current
+}
+
 function buildGeneratedRippleButton(titleExpr) {
-  return `RippleButton(title: ${titleExpr}, backgroundColor: Colors.transparent, minWidth: 0, padding: EdgeInsets.zero, onTap: () {})`
+  return `RippleButton(title: ${titleExpr}, backgroundColor: Colors.transparent,minWidth : 0, padding: EdgeInsets.zero, onTap: () {})`
 }
 
 function buildWidgetFromElement(el, cssMap, topClassName, skipRootDecoration) {
@@ -1469,12 +1409,6 @@ function buildWidgetFromElement(el, cssMap, topClassName, skipRootDecoration) {
         semanticWidget = radioGroupWidget
       }
     }
-    if (!semanticWidget) {
-      const progressBarWidget = buildProgressBarWidgetFromElement(el, cssMap)
-      if (progressBarWidget) {
-        semanticWidget = progressBarWidget
-      }
-    }
     if (!semanticWidget && looksLikeButtonClass(className)) {
       const buttonLabel = uniqueTexts(extractTextsFromElement(el, [])).find(Boolean)
       if (buttonLabel) {
@@ -1525,7 +1459,8 @@ function buildWidgetFromElement(el, cssMap, topClassName, skipRootDecoration) {
     const src = getAttr(el, 'src') || ''
     if (/^https?:\/\//.test(src)) {
       const widget = `Image.network(${toDartLiteral(src)}, fit: BoxFit.cover)`
-      return { widget: rotate != null ? `Transform.rotate(angle: ${rotate}, child: ${widget})` : widget, isAbsolute: !!position, position, zIndex, flexGrow, size }
+      const sized = applySizeToWidget(widget, size)
+      return { widget: rotate != null ? `Transform.rotate(angle: ${rotate}, child: ${sized})` : sized, isAbsolute: !!position, position, zIndex, flexGrow, size }
     }
     const local = resolveLocalAsset(src, className)
     if (local) {
@@ -1538,7 +1473,8 @@ function buildWidgetFromElement(el, cssMap, topClassName, skipRootDecoration) {
         const finalWidget = (rotate != null && !stripPlacement) ? `Transform.rotate(angle: ${rotate}, child: ${simplified})` : simplified
         return { widget: finalWidget, isAbsolute: stripPlacement ? false : !!position, position: stripPlacement ? null : position, zIndex, flexGrow, size }
       }
-      return { widget: rotate != null ? `Transform.rotate(angle: ${rotate}, child: ${widget})` : widget, isAbsolute: !!position, position, zIndex, flexGrow, size }
+      const sized = applySizeToWidget(widget, size)
+      return { widget: rotate != null ? `Transform.rotate(angle: ${rotate}, child: ${sized})` : sized, isAbsolute: !!position, position, zIndex, flexGrow, size }
     }
     const asset = assetForClassName(className)
     if (asset) {
@@ -1561,12 +1497,10 @@ function buildWidgetFromElement(el, cssMap, topClassName, skipRootDecoration) {
     return { widget: rotate != null ? `Transform.rotate(angle: ${rotate}, child: ${widget})` : widget, isAbsolute: !!position, position, zIndex, flexGrow, size }
   }
   if (tag === 'span' || tag === 'p') {
-    if (children.length === 1) {
-      const widget = children[0].widget
-      return { widget: rotate != null ? `Transform.rotate(angle: ${rotate}, child: ${widget})` : widget, isAbsolute: !!position, position, zIndex, flexGrow, size }
-    }
-    const widget = children.length
-      ? `Row(children: [${children.map(c => c.widget).join(', ')}])`
+    const align = textAlignFromProps(props)
+    const spans = buildInlineTextSpans(el, cssMap, topClassName, skipRootDecoration)
+    const widget = spans.length
+      ? `RichText(text: TextSpan(children: [${spans.join(', ')}])${align ? `, textAlign: ${align}` : ''})`
       : 'SizedBox.shrink()'
     return { widget: rotate != null ? `Transform.rotate(angle: ${rotate}, child: ${widget})` : widget, isAbsolute: !!position, position, zIndex, flexGrow, size }
   }
@@ -1575,27 +1509,24 @@ function buildWidgetFromElement(el, cssMap, topClassName, skipRootDecoration) {
   const flowKids = semanticWidget ? [] : children.filter(c => !c.isAbsolute)
   const absKids = semanticWidget ? [] : children.filter(c => c.isAbsolute).sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0))
   const inputOwnedWidget = usesAppOwnedInputBackground(semanticWidget)
-  const progressBarOwnedWidget = usesAppOwnedProgressBarBackground(semanticWidget)
   const wrappedInputOwnedWidget = !semanticWidget && flowKids.length === 1 && usesAppOwnedInputBackground(flowKids[0].widget)
-  const wrappedProgressBarOwnedWidget = !semanticWidget && flowKids.length === 1 && usesAppOwnedProgressBarBackground(flowKids[0].widget)
   const appOwnedInputWidget = inputOwnedWidget || wrappedInputOwnedWidget
-  const appOwnedProgressBarWidget = progressBarOwnedWidget || wrappedProgressBarOwnedWidget
-  const appOwnedStyledWidget = appOwnedInputWidget || appOwnedProgressBarWidget
-  const omitBackgroundColor = appOwnedStyledWidget
+  const omitBackgroundColor = appOwnedInputWidget
   const decoration = (skipRootDecoration && className === topClassName)
     ? null
     : boxDecorationFromProps(props, { omitBackgroundColor })
-  const effectivePadding = appOwnedStyledWidget ? null : padding
-  const effectiveDecoration = appOwnedStyledWidget ? null : decoration
+  const effectivePadding = appOwnedInputWidget ? null : padding
+  const effectiveDecoration = appOwnedInputWidget ? null : decoration
   const layoutSize = (appOwnedInputWidget && size) ? { ...size, h: null } : size
   const flex = flexConfigFromProps(props)
   let flowBody = semanticWidget
   if (!flowBody && flowKids.length) {
     if (flex) {
+      const isScrollableRoot = className === topClassName && process.env.JSX2FLUTTER_MODE !== 'classic'
       const alignSelf = String(props['align-self'] || '').toLowerCase()
-      const hasMainAxisSize = flex.isRow
+      const hasMainAxisSize = !isScrollableRoot && (flex.isRow
         ? (layoutSize.w != null || alignSelf === 'stretch')
-        : (layoutSize.h != null)
+        : (layoutSize.h != null))
       const gapLiteral = flex.gap ? (flex.isRow ? `${flex.gap}.width` : `${flex.gap}.height`) : null
       const baseKids = flowKids.map(c => {
         if (flex && c.flexGrow > 0 && hasMainAxisSize) {
@@ -1727,6 +1658,7 @@ function generateDart(ast, cssMap, outClassName, outPath) {
   const rootDeco = boxDecorationFromProps(rootProps)
   const mode = process.env.JSX2FLUTTER_MODE
   let inner = rootWidget?.widget || 'const SizedBox.shrink()'
+  inner = unwrapDirectFlexWidget(inner)
   let finalRoot
   if (mode === 'classic') {
     finalRoot = inner
@@ -1752,35 +1684,31 @@ function generateDart(ast, cssMap, outClassName, outPath) {
   const usesCheckbox = finalRoot.includes('_GeneratedCheckbox(') || finalRoot.includes('AppCheckbox(')
   const usesRippleButton = finalRoot.includes('RippleButton(')
   const usesTextGradient = finalRoot.includes('AppTextGradient(')
-  const usesProgressBar = finalRoot.includes('AppProgressBar(')
   const usesGetWidth = finalRoot.includes('Get.width')
   const imports = [
     "import 'package:flutter/material.dart';",
-    `import 'package:${PROJECT_PACKAGE_NAME}/src/utils/app_colors.dart';`,
-    `import 'package:${PROJECT_PACKAGE_NAME}/src/extensions/int_extensions.dart';`,
+    "import 'package:link_home/src/utils/app_colors.dart';",
+    "import 'package:link_home/src/extensions/int_extensions.dart';",
     "import 'package:flutter_svg/flutter_svg.dart';",
-    `import 'package:${PROJECT_PACKAGE_NAME}/src/utils/app_assets.dart';`,
+    "import 'package:link_home/src/utils/app_assets.dart';",
   ]
   if (usesInput) {
-    imports.push(`import 'package:${PROJECT_PACKAGE_NAME}/src/ui/widgets/app_input.dart';`)
+    imports.push("import 'package:link_home/src/ui/widgets/app_input.dart';")
   }
   if (usesDateTimeField) {
-    imports.push(`import 'package:${PROJECT_PACKAGE_NAME}/src/ui/widgets/app_input_full_time.dart';`)
+    imports.push("import 'package:link_home/src/ui/widgets/app_input_full_time.dart';")
   }
   if (usesRadio) {
-    imports.push(`import 'package:${PROJECT_PACKAGE_NAME}/src/ui/widgets/app_radio_button.dart';`)
+    imports.push("import 'package:link_home/src/ui/widgets/app_radio_button.dart';")
   }
   if (usesCheckbox) {
-    imports.push(`import 'package:${PROJECT_PACKAGE_NAME}/src/ui/widgets/base/checkbox/app_checkbox.dart';`)
+    imports.push("import 'package:link_home/src/ui/widgets/base/checkbox/app_checkbox.dart';")
   }
   if (usesRippleButton) {
-    imports.push(`import 'package:${PROJECT_PACKAGE_NAME}/src/ui/widgets/base/ripple_button.dart';`)
+    imports.push("import 'package:link_home/src/ui/widgets/base/ripple_button.dart';")
   }
   if (usesTextGradient) {
-    imports.push(`import 'package:${PROJECT_PACKAGE_NAME}/src/ui/widgets/app_text_gradient.dart';`)
-  }
-  if (usesProgressBar) {
-    imports.push(`import 'package:${PROJECT_PACKAGE_NAME}/src/ui/widgets/app_progressbar.dart';`)
+    imports.push("import 'package:link_home/src/ui/widgets/app_text_gradient.dart';")
   }
   if (usesGetWidth) {
     imports.push("import 'package:get/get.dart';")