injast-core 1.0.81 → 1.0.82

package/README.md

@@ -142,6 +142,26 @@ guidelines/Guidelines.md
 
 The guidelines route Make to setup instructions, foundations, component selection rules, and focused component usage notes. In a Vite/React Make file, use `SPAThemeProvider`, import `injast-core/fonts.css` once, and prefer Injast components over raw HTML controls.
 
+For Figma-driven implementation, use the Figma MCP flow before coding. The local MCP endpoint is:
+
+```text
+http://127.0.0.1:3845/mcp
+```
+
+Fetch structured design context and a screenshot for the exact node, then translate the design into Injast Core components, RTL layout, Persian copy, and the project guidelines.
+
+Generated mobile app screens should follow the Gold reference app at `/Users/ali/Documents/Gold`: centered `max-width: 520px` shell, wired navigation and overlay behavior, Injast Core inputs, drawer-based pre-invoices, and no mobile OS/app status bar chrome.
+
+## Codex Skill
+
+The package ships a Codex skill for Injast app generation:
+
+```text
+skills/injast-app-builder
+```
+
+After installing the package, consumers can point Codex at `node_modules/injast-core/skills/injast-app-builder` or copy that folder into their Codex skills directory if their Codex setup does not auto-discover package-bundled skills.
+
 ## License
 
 ISC

package/guidelines/Guidelines.md

@@ -2,11 +2,12 @@
 
 ## Product Character
 
-Injast Core is an RTL-first React and Material UI design system for Persian product interfaces. Generated screens should feel like focused product UI: mobile-first, operational, compact, and easy to scan repeatedly.
+Injast Core is an RTL-first React and Material UI design system for Persian product interfaces. Generated screens should feel like focused product UI: mobile-first, operational, compact, wired together, and easy to scan repeatedly.
 
 - Build Persian and RTL experiences by default.
 - Prefer task screens, forms, tables, status feedback, and flows over marketing pages.
-- Keep the main app canvas constrained to `max-width: 550px` with `margin-inline: auto` unless a data-heavy desktop layout clearly needs more width.
+- Treat `/Users/ali/Documents/Gold` as the canonical reference for mobile app shell structure, component composition, wired flows, and drawer behavior.
+- Keep the main app canvas constrained to `max-width: 520px` with `margin-inline: auto` unless a data-heavy desktop layout clearly needs more width.
 - Use brand color for primary actions and active states only. Do not use strong colors as large decorative backgrounds.
 - Use measured density: compact controls, clear labels, and enough spacing around decisions and errors.
 
@@ -50,19 +51,46 @@ Type import rules live in `guidelines/types.md`.
 - Use `coreFaIR` in SPA/Figma Make theme options for Persian Material UI localization.
 - Use named imports from `injast-core` for common usage; use subpath imports only for focused entrypoints.
 
+## Figma MCP Workflow
+
+For Figma-driven implementation, use the Figma MCP server before writing app code. The local MCP endpoint is:
+
+```text
+http://127.0.0.1:3845/mcp
+```
+
+Rules:
+
+- Fetch design context for the exact frame or node first.
+- Fetch a screenshot for the same frame or variant before implementation.
+- Use metadata to narrow the request when the initial design context is too large.
+- Translate Figma output into Injast Core, RTL, Persian, and Gold-style app conventions. Do not copy generic generated React or Tailwind structure as final code.
+- If Figma includes mobile OS chrome or an app status bar, omit it from implementation.
+
 ## Hard UI Rules
 
 - Use Injast Core components before raw HTML or direct Material UI primitives.
 - Do not use raw `<button>`, `<input>`, `<select>`, checkbox, radio, dialog, table, or image elements when an Injast component exists.
+- All visible inputs must come from Injast Core, such as `TextField`, `NumberInput`, `InputPhoneNumber`, `CardNumberInput`, `OtpInput`, `Select`, `MultiSelect`, `Autocomplete`, `Checkbox`, `Radio`, `Toggle`, `Slider`, or `CounterBoxInput`.
+- Do not use direct Material UI input primitives in generated app code when an Injast input exists.
 - Use RTL by default: provider `dir="rtl"`, Persian labels, right-aligned reading flow, and logical CSS properties such as `marginInline` or `px`.
-- Keep the primary app surface centered with `maxWidth: 550` or CSS `max-width: 550px; margin-inline: auto;`.
+- Keep the primary app surface centered with `maxWidth: 520` or CSS `max-width: 520px; margin-inline: auto;`.
 - Do not guess unsupported component props. Use Material UI props plus documented Injast-specific props.
 - Use `iconsax-react` for all generated app icons. Do not use Lucide, Heroicons, Font Awesome, inline SVGs, emoji icons, or `@mui/icons-material` in generated screens.
 - Keep icon sizes consistent: 20px for input adornments, 24px for standard actions, 28px for status icons.
 - Use `defaultColors`, `appColors`, and theme palette values instead of hardcoded colors where possible.
 - Keep all controls reachable on mobile. Do not rely on hover-only actions for required workflows.
 - Do not create nested cards unless the inner card is a repeated item, modal content, or a genuinely separate framed tool.
+- Do not implement mobile OS status bars or decorative app status bars, even when the design file includes them.
+- Generated apps must be wired flows, not a set of disconnected static screens. Navigation actions, drawer/modal triggers, submit buttons, close buttons, and confirmation actions should update local state or route to the next screen.
+
+## Overlay and Drawer Rules
+
+- Pre-invoices (`پیش‌فاکتور`) are drawer or bottom-sheet overlays, not independent pages.
+- Drawers should feel like drawers: fixed overlay, backdrop, centered `maxWidth: 520` sheet, visible close path, and entrance/exit motion from the drawer edge.
+- When a drawer is open, dim, blur, or subtly scale the underlying page when it helps communicate layering.
+- Keep modal content compact and centered inside the 520px app shell. Do not put full pages inside modals.
 
 ## Output Expectations
 
-Generated screens should look like production Persian product UI. Favor concise copy, clear hierarchy, stable control sizes, predictable forms, visible validation, compact data displays, and direct recovery actions for empty or error states.
+Generated screens should look like production Persian product UI. Favor concise copy, clear hierarchy, stable control sizes, predictable forms, visible validation, compact data displays, wired actions, and direct recovery actions for empty or error states.

package/guidelines/components/data-display.md

@@ -39,7 +39,7 @@ Rules:
 - Use built-in MRT options for sorting, filtering, selection, row actions, and pagination.
 - Keep row actions concise and aligned.
 - Use right alignment for Persian text, center alignment for small status columns, and left or LTR alignment for Latin IDs when necessary.
-- Avoid placing wide `DataGrid` tables inside the 550px mobile shell unless horizontal scrolling is intentional.
+- Avoid placing wide `DataGrid` tables inside the 520px mobile shell unless horizontal scrolling is intentional.
 
 ## Typography
 

package/guidelines/components/date-inputs.md

@@ -34,7 +34,7 @@ Rules:
 - Use `minDate` and `maxDate` when the business flow has valid ranges.
 - Use `textFieldSxProps` only for field-level `sx` overrides that cannot be expressed through layout wrappers.
 - Ensure the app build supports CSS imports from npm packages. `MobileDatePicker` uses `react-multi-date-picker`, `react-date-object`, and the Persian calendar/locale internally.
-- Keep date fields full width in the 550px mobile shell.
+- Keep date fields full width in the 520px mobile shell.
 
 ## WheelDatePicker
 
@@ -46,7 +46,7 @@ Behavior and sizing:
 |---|---|
 | Field height | 48px |
 | Field radius | 8px |
-| Drawer max width | 550px |
+| Drawer max width | 520px |
 | Drawer horizontal alignment | centered with `mx: "auto"` |
 | Drawer body padding | `px: 3.5`, `py: 6` |
 | Wheel item height | 44px |

package/guidelines/components/feedback.md

@@ -38,7 +38,7 @@ Rules:
 - Prefer `MessageProvider` and `useMessage` for app-level feedback.
 - Match icon, text, border, and background to severity.
 - Keep toast copy short and actionable.
-- In 550px app shells, keep toasts visually aligned to the centered app surface.
+- In 520px app shells, keep toasts visually aligned to the centered app surface.
 - Use `anchorOrigin` to change placement; default is top-left.
 - Use `isWide` only for messages that need a wider minimum width.
 - `handleClose` should close the toast and should be safe to call from click or timeout.
@@ -66,6 +66,7 @@ Modal sizing and style:
 - Paper margin: 8px on small screens.
 - Backdrop: dark translucent blur.
 - Use explicit `width` for compact dialogs, usually 320px to 420px.
+- Keep modal paper and content visually centered inside the 520px app shell.
 - Use `gap: 4` inside modal content.
 
 Rules:
@@ -79,16 +80,21 @@ Rules:
 
 Use drawers for bottom-sheet-like mobile tasks such as date selection, filters, and short pickers.
 
+Pre-invoices (`پیش‌فاکتور`) must be drawers or bottom sheets. Do not build pre-invoices as independent pages.
+
 Rules:
 
 - Control visibility with `isDrawerOpen`.
 - Use `onClose` for backdrop, escape, and close-button behavior.
 - Default `anchor` is bottom; use `anchor="right"` for RTL side navigation drawers.
-- Align drawer content to the 550px app shell when possible.
-- Use `maxWidth: 550` and `mx: "auto"` for drawer roots or content wrappers.
+- Align drawer content to the 520px app shell when possible.
+- Use `maxWidth: 520` and `mx: "auto"` for drawer roots or content wrappers.
 - Use `px: 3.5`, `py: 6` for drawer body padding.
 - Put the title and close icon in the header row.
 - Use a full-width contained button for the main confirm action.
+- Make drawer layering clear with a backdrop and fixed overlay behavior.
+- Animate bottom drawers from `translateY(100%)` to `translateY(0)` and animate the backdrop opacity so the UI does not feel like a sudden page swap.
+- When useful, dim, blur, or subtly scale the underlying page while the drawer is open.
 
 ## Loading and Progress
 

package/guidelines/components/forms.md

@@ -4,6 +4,8 @@
 
 - Use controlled components for form values.
 - Use `TextField` instead of raw `<input>`.
+- Use Injast Core inputs for every generated field. Choose `TextField`, `NumberInput`, `InputPhoneNumber`, `CardNumberInput`, `OtpInput`, `Select`, `MultiSelect`, `Autocomplete`, `Checkbox`, `Radio`, `Toggle`, `Slider`, or `CounterBoxInput` before direct Material UI or raw HTML controls.
+- Do not import direct Material UI input primitives in generated app code when an Injast input exists.
 - Put labels on every input unless the surrounding context makes the value unmistakable.
 - Use `error` and `helperText` for validation messages.
 - Use 48px control height for default forms.
@@ -40,7 +42,7 @@ Sizing:
 - Default height: 48px.
 - Radius: 8px.
 - Input adornment icon: 20px.
-- Use `fullWidth` in mobile forms and 550px app shells.
+- Use `fullWidth` in mobile forms and 520px app shells.
 - Use `dir="ltr"` only for Latin codes, OTP, card numbers, phone-like numeric values, or technical identifiers.
 
 ## Form Wrappers

package/guidelines/components/layout.md

@@ -9,7 +9,7 @@ import { Box } from "injast-core";
 
 <Box
   sx={{
-    maxWidth: 550,
+    maxWidth: 520,
     mx: "auto",
     minHeight: "100dvh",
     bgcolor: "neutral.50",
@@ -22,7 +22,7 @@ import { Box } from "injast-core";
 Equivalent CSS:
 
 ```css
-max-width: 550px;
+max-width: 520px;
 margin-inline: auto;
 ```
 
@@ -39,6 +39,8 @@ Use a wider layout only for desktop-first dashboards, large tables, chart-heavy
 - Use `gap: 3` to `gap: 4` inside field groups and card content.
 - Keep a hint of the next section visible on the first viewport when building long mobile flows.
 - Do not create landing-page heroes for app/tool requests.
+- Do not implement mobile OS status bars or decorative app status bars, even when present in Figma frames.
+- Wire screens into flows. Back, home, receipt/history, submit, confirm, close, and selection actions should navigate or update local state instead of acting as static placeholders.
 
 ## Layout Primitives
 
@@ -62,7 +64,7 @@ Rules:
 
 For mobile forms with a clear final action, use a bottom action band:
 
-- Shell width remains 550px max and centered.
+- Shell width remains 520px max and centered.
 - Use `position: "sticky"` or `position: "fixed"` only when the action must stay visible.
 - Use `px: 4`, `py: 3`, neutral/white background, and a subtle top border.
 - Use a full-width `Button buttonSize="M"` for the primary action.
@@ -70,7 +72,7 @@ For mobile forms with a clear final action, use a bottom action band:
 
 ## Sticky App Regions
 
-For chat, assistant, or app-like flows, use a sticky header and sticky bottom input/action area inside the 550px shell.
+For chat, assistant, or app-like flows, use a sticky header and sticky bottom input/action area inside the 520px shell.
 
 Header rules:
 
@@ -133,4 +135,4 @@ Rules:
 
 - Keep the active step clear.
 - Provide Back/Next actions with `Button`.
-- Keep step content width readable; 400px to 550px works well for form flows.
+- Keep step content width readable; 400px to 520px works well for form flows.

package/guidelines/foundations/spacing.md

@@ -26,7 +26,7 @@ Use this for generated mobile-first app screens:
 ```tsx
 <Box
   sx={{
-    maxWidth: 550,
+    maxWidth: 520,
     mx: "auto",
     minHeight: "100dvh",
     bgcolor: "neutral.50",
@@ -39,14 +39,14 @@ Use this for generated mobile-first app screens:
 Equivalent CSS:
 
 ```css
-max-width: 550px;
+max-width: 520px;
 margin-inline: auto;
 ```
 
 Rules:
 
 - Center the shell with `mx: "auto"` or `margin-inline: auto`.
-- Keep the shell full width below 550px.
+- Keep the shell full width below 520px.
 - Use `minHeight: "100dvh"` for app-like screens.
 - Apply page padding inside the shell, not on `body`.
 - Use wider layouts only for data-heavy desktop dashboards, large tables, or split-pane workflows.

package/guidelines/setup.md

@@ -16,6 +16,16 @@ injast
 
 Then select the public unscoped package `injast-core`. If exact search for `injast-core` returns unrelated `core` packages first, use `injast` as the search term. Do not search for or install `@alimohammadiwork/injast-core` or `@make-kits/injast-core-make-kit` for this public package path.
 
+## Figma MCP
+
+For design-driven implementation, use the Figma MCP server and fetch both structured design context and a screenshot before writing code. The local MCP endpoint is:
+
+```text
+http://127.0.0.1:3845/mcp
+```
+
+Translate the MCP output into Injast Core patterns, RTL layout, Persian copy, and the Gold reference app structure. Do not keep generic generated React, Tailwind classes, raw controls, or decorative mobile OS status bars from the design payload.
+
 ## Required Imports
 
 Import the font stylesheet once near the app root:
@@ -169,7 +179,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body
         style={{
           backgroundColor: defaultColors.neutral[100],
-          maxWidth: "550px",
+          maxWidth: "520px",
           marginInline: "auto",
         }}
       >
@@ -185,7 +195,7 @@ Inside generated pages, use the same centered constraint with Injast layout prim
 ```tsx
 <Box
   sx={{
-    maxWidth: 550,
+    maxWidth: 520,
     mx: "auto",
     minHeight: "100dvh",
     bgcolor: "neutral.50",
@@ -198,7 +208,7 @@ Inside generated pages, use the same centered constraint with Injast layout prim
 Equivalent CSS is allowed for the outer shell:
 
 ```css
-max-width: 550px;
+max-width: 520px;
 margin-inline: auto;
 ```
 
@@ -231,3 +241,4 @@ Read `guidelines/runtime.md` before using hooks, API helpers, date helpers, Pers
 - Do not change package exports, public component APIs, or provider APIs in generated examples.
 - Injast Core wraps Material UI (`@mui/material`), Emotion (`@emotion/react`, `@emotion/cache`, `@emotion/styled`), and RTL Stylis (`stylis`, `stylis-plugin-rtl`). Do not install or configure separate theme/cache providers unless the host app already owns that setup.
 - Use package exports only: root, `components`, `providers`, `hooks`, `libs`, `utils`, `context`, `constants`, `types`, and `fonts.css`.
+- Build generated examples as wired app flows. Connect navigation, drawer/modal open and close behavior, and submit/confirm actions with local state when no backend exists.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "injast-core",
-  "version": "1.0.81",
+  "version": "1.0.82",
   "description": "Reusable Injast React and Material UI components, providers, hooks, utilities, and design tokens.",
   "type": "module",
   "main": "dist/index.js",
@@ -9,6 +9,7 @@
   "files": [
     "dist",
     "guidelines",
+    "skills",
     "README.md",
     "LICENSE"
   ],

package/skills/injast-app-builder/SKILL.md

@@ -0,0 +1,49 @@
+---
+name: injast-app-builder
+description: Build or revise Persian RTL mobile product app flows with Injast Core and the Gold reference app. Use when Codex is asked to implement Injast Core screens, Figma-to-Injast designs, Gold-style buy/sell or drawer flows, Persian mobile app UI, or to enforce Injast guidelines around 520px shells, wired navigation, Injast inputs, and drawer-based pre-invoices.
+---
+
+# Injast App Builder
+
+## Required References
+
+Read these before implementing or reviewing an Injast app flow:
+
+- `guidelines/Guidelines.md` from the installed `injast-core` package.
+- Focused guideline files linked from that document for setup, layout, forms, feedback, data display, date inputs, icons, runtime, and types.
+- `/Users/ali/Documents/Gold` as the canonical reference app for composition, 520px shell, wired state, drawer pre-invoices, and Persian mobile product behavior when that reference is available locally.
+
+## Implementation Workflow
+
+1. Inspect the target app and the relevant Gold reference files before editing.
+2. Keep runtime component APIs unchanged unless the user explicitly asks for package source changes.
+3. Build Persian RTL flows with `SPAThemeProvider` for Vite/Figma Make apps or `ThemeProvider` for Next.js apps.
+4. Center mobile app surfaces with `maxWidth: 520` or `max-width: 520px` plus `mx: "auto"` or `margin-inline: auto`.
+5. Wire the product flow end to end: navigation actions, submit buttons, drawers, modals, close actions, and confirmations must update route or local state.
+6. Verify the result against the Gold reference behavior and the focused guidelines.
+
+## Figma MCP Workflow
+
+For Figma-driven work, use the Figma MCP server at:
+
+```text
+http://127.0.0.1:3845/mcp
+```
+
+Use this sequence:
+
+1. Fetch design context for the exact node or frame.
+2. Fetch a screenshot for the same target before implementation.
+3. If the payload is too large, fetch metadata and then narrow to the needed node.
+4. Translate the design into Injast Core conventions. Do not keep generic React, Tailwind, raw controls, or mobile OS chrome from MCP output as final code.
+
+## Hard Rules
+
+- Use Injast Core components before raw HTML or direct Material UI primitives.
+- Use Injast inputs for every field: `TextField`, `NumberInput`, `InputPhoneNumber`, `CardNumberInput`, `OtpInput`, `Select`, `MultiSelect`, `Autocomplete`, `Checkbox`, `Radio`, `Toggle`, `Slider`, or `CounterBoxInput`.
+- Use `iconsax-react` for generated app icons.
+- Do not implement mobile OS status bars or decorative app status bars, even when present in Figma.
+- Pre-invoices (`پیش‌فاکتور`) are drawer or bottom-sheet overlays, not independent pages.
+- Drawers must feel like drawers: fixed overlay, backdrop, centered 520px sheet, visible close path, and entrance/exit motion from the drawer edge.
+- When useful, dim, blur, or subtly scale the underlying page while an overlay is open.
+- Keep generated apps as wired flows, not disconnected screen previews.

package/skills/injast-app-builder/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Injast App Builder"
+  short_description: "Build Injast RTL mobile app flows"
+  default_prompt: "Use $injast-app-builder to build or revise a Persian Injast Core mobile app flow."