@startdownnotez404/ui 1.0.0 → 1.3.5

package/README.md

@@ -0,0 +1,110 @@
+# @startdownnotez404/ui
+
+React + TypeScript component library for Startdown apps. Built on **MUI v7**, documented in Storybook, published to GitHub Packages.
+
+## Install
+
+The package is on GitHub Packages, not the public npm registry. Point `@startdownnotez404` at `https://npm.pkg.github.com` (`.npmrc` or `publishConfig`) and install a published semver:
+
+```json
+{
+  "dependencies": {
+    "@startdownnotez404/ui": "^1.3.1"
+  }
+}
+```
+
+Do not consume unpublished builds via local `npm pack`, `file:../…tgz`, or `npm link`.
+
+### GitHub Release `.tgz` (WebContainer hosts)
+
+A push to `main` that bumps `package.json` `version` (or `workflow_dispatch` when Release `v$version` is missing) builds the package, creates GitHub Release **`v$version`**, uploads `startdownnotez404-ui-$version.tgz`, and publishes the same tarball to GitHub Packages. WebContainer cannot reliably fetch `npm.pkg.github.com` or Release URLs; the **host** should download that Release asset and rewrite the dependency to `file:./startdownnotez404-ui-$version.tgz`.
+
+### Peer dependencies
+
+Keep these in the host app (they are also listed in this package's `dependencies` for 1.x so existing installs keep working):
+
+- `react` / `react-dom`
+- `@mui/material` / `@mui/icons-material` / `@mui/lab`
+- `@emotion/react` / `@emotion/styled`
+- `react-hook-form`
+
+## Usage
+
+Wrap the tree with `ThemeProvider` and import CSS if the host does not already load MUI baseline styles:
+
+```tsx
+import { ThemeProvider, Button, UseForm, FIELD_TYPEs } from '@startdownnotez404/ui';
+import type { StrictFormConfig } from '@startdownnotez404/ui';
+
+export function App() {
+  return (
+    <ThemeProvider>
+      <Button>Hello</Button>
+    </ThemeProvider>
+  );
+}
+```
+
+Subpath imports exist for tree-shaking heavy modules, for example `@startdownnotez404/ui/button`, `@startdownnotez404/ui/useForm`, `@startdownnotez404/ui/chart`. `@startdownnotez404/ui/table` is the compound data table (TanStack grid — not MUI table primitives). Overlay helpers are `@startdownnotez404/ui/overlay` (`Popper`, `ClickAwayListener`).
+
+Highlighter and layout widgets are **subpath-only**. They are not re-exported from `@startdownnotez404/ui` so Author / WebContainer apps that only need `Button` / `MuiModal` do not evaluate `highlight.js`, `html-react-parser`, `elkjs`, or CodeMirror:
+
+```tsx
+import { Markdown } from '@startdownnotez404/ui/markdown';
+import { FlowMap } from '@startdownnotez404/ui/flowMap';
+import { JsonEditor } from '@startdownnotez404/ui/jsonEditor';
+```
+
+### Table: compound grid vs MUI markup
+
+Import `Table` from `@startdownnotez404/ui` or `@startdownnotez404/ui/table` for the interactive data grid (filters, grouping, forms, `TableEmptyState`).
+
+Do **not** expect MUI `TableHead` / `TableRow` / `TableCell` on the public root barrel. Those primitives live at the internal `@/ele/Table` alias and are kept off the published `Table` export so the names do not collide. Simple journal tables in a host app should import from `@mui/material/Table` (and friends) until they need the compound grid.
+
+### Chart
+
+Stacked-area (default), line, bar, and pie charts with hover tooltips. The host owns domain math (cumulative totals, currency, “today” markers). Colors are `--chart-*` tokens (series defaults are `color-mix` of hue tokens with scheme chrome); `sx` merges after the defaults:
+
+```tsx
+import { Chart } from '@startdownnotez404/ui';
+
+<Chart
+  type="bar"
+  labels={['Mon', 'Tue', 'Wed']}
+  series={[{ id: 'a', label: 'Alpha', values: [1, 3, 2] }]}
+  formatY={(value) => String(value)}
+  sx={{ '--chart-series-0': 'color-mix(in lab, var(--mui-palette-warning-main) 60%, var(--mui-palette-primary-main))' }}
+/>
+```
+
+`type="area"` (default) draws a stacked area with a dotted top stroke. `type="pie"` uses each series as a slice (`hole={0.58}` for a donut). `stacked` groups bars into a stack.
+
+Forms use `useConfiguredForm` (deprecated alias: `useForm2`):
+
+```ts
+import { useConfiguredForm, UseForm, FIELD_TYPEs } from '@startdownnotez404/ui';
+```
+
+JSON form fields still work through `UseForm`; the CodeMirror editor is loaded only when a json field renders. Direct `JsonEditor` usage must import `@startdownnotez404/ui/jsonEditor`.
+
+## Develop
+
+```sh
+npm ci
+npm run storybook   # http://localhost:6006
+npm run lint
+npm test
+npm run build
+```
+
+Storybook is the visual catalog. Vitest covers hook/state contracts for UseForm, UseSearch, ScrollToLoad, and Table.
+
+## Releases
+
+Bump `package.json` `version` on `main` (semver patch or minor). CI then:
+
+1. Detects the version change versus the previous `main` commit (or a missing `v$version` Release, including `workflow_dispatch`).
+2. Runs `npm ci`, `npm run build`, and `npm pack`.
+3. Creates GitHub Release `v$version` and uploads `startdownnotez404-ui-$version.tgz`.
+4. Publishes that tarball to GitHub Packages (`publishConfig` → `npm.pkg.github.com`). There is no npmjs publish.

package/dist/AutocompleteField-ZKNU2IRR.mjs

@@ -0,0 +1,181 @@
+import {
+  GitHubPicker
+} from "./chunk-SGCUDWO3.mjs";
+import {
+  Option
+} from "./chunk-OJV6V7YZ.mjs";
+import {
+  FieldHelperText
+} from "./chunk-MI64T62E.mjs";
+import {
+  Explanation_default,
+  getFieldExplanation,
+  mergeFieldSx
+} from "./chunk-UTVSYS6S.mjs";
+import {
+  MuiFormLabel,
+  default as default3
+} from "./chunk-T4X375IG.mjs";
+import "./chunk-56TI2ZBT.mjs";
+import "./chunk-MDAUF7IL.mjs";
+import "./chunk-QFF3HTHL.mjs";
+import "./chunk-JIU5GVM7.mjs";
+import "./chunk-4Q54P737.mjs";
+import "./chunk-OP6LKXPA.mjs";
+import "./chunk-ZVFYOXDE.mjs";
+import "./chunk-4RPFRNXG.mjs";
+import {
+  default as default2
+} from "./chunk-S6EZVRZC.mjs";
+import "./chunk-FJ6ZGZIA.mjs";
+
+// src/components/compound/UseForm/src/Fields/AutocompleteField.tsx
+import React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EMPTY_OPTIONS = [];
+function toOptionClass(option) {
+  return option instanceof Option ? option : new Option(option);
+}
+var AutocompleteField = ({ field }) => {
+  const acSlot = field.slotProps;
+  if (acSlot?.useOptions) {
+    return /* @__PURE__ */ jsx(AutocompleteFieldWithOptions, { field, useOptions: acSlot.useOptions });
+  }
+  return /* @__PURE__ */ jsx(AutocompleteFieldView, { field, options: acSlot?.options ?? EMPTY_OPTIONS });
+};
+var AutocompleteFieldWithOptions = ({
+  field,
+  useOptions
+}) => {
+  const { options = EMPTY_OPTIONS } = useOptions();
+  return /* @__PURE__ */ jsx(AutocompleteFieldView, { field, options });
+};
+var AutocompleteFieldView = ({
+  field,
+  options
+}) => {
+  const { control, getValues } = useFormContext();
+  const {
+    name,
+    label,
+    required,
+    disabled,
+    sx,
+    size,
+    slotProps,
+    errorMsg,
+    defaultValue
+  } = field;
+  const acSlot = slotProps;
+  const mergedOptions = React.useMemo(
+    () => options.map(toOptionClass),
+    [options]
+  );
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control,
+      name,
+      defaultValue,
+      render: ({ field: { onChange: controllerOnChange, value }, fieldState: { error } }) => /* @__PURE__ */ jsx(
+        AutocompletePicker,
+        {
+          value,
+          controllerOnChange,
+          mergedOptions,
+          acSlot,
+          disabled,
+          required,
+          error,
+          errorMsg,
+          helperText: field.helperText,
+          label,
+          size,
+          sx,
+          explanation: getFieldExplanation(field),
+          onFieldChange: (next) => {
+            field.onChange?.(next, getValues());
+          }
+        }
+      )
+    }
+  );
+};
+function AutocompletePicker({
+  value,
+  controllerOnChange,
+  mergedOptions,
+  acSlot,
+  disabled,
+  required,
+  error,
+  errorMsg,
+  helperText,
+  label,
+  size,
+  sx,
+  explanation,
+  onFieldChange
+}) {
+  const [selectedIds, setSelectedIds] = React.useState(
+    Array.isArray(value) ? value : value ? [value] : []
+  );
+  React.useEffect(() => {
+    const next = Array.isArray(value) ? value : value ? [value] : [];
+    setSelectedIds(next);
+  }, [value]);
+  return /* @__PURE__ */ jsxs(
+    default3,
+    {
+      disabled,
+      required,
+      error: !!error,
+      fullWidth: true,
+      size: "small",
+      sx: mergeFieldSx(size, sx),
+      children: [
+        /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", alignItems: "center", justifyContent: "flex-start" }, children: [
+          /* @__PURE__ */ jsx(MuiFormLabel, { component: "legend", children: label }),
+          /* @__PURE__ */ jsx(Explanation_default, { explanation })
+        ] }),
+        /* @__PURE__ */ jsx(default2, { sx: { py: 1 }, children: /* @__PURE__ */ jsx(
+          GitHubPicker,
+          {
+            options: mergedOptions,
+            variant: acSlot?.variant,
+            color: acSlot?.color,
+            multiple: acSlot?.multiple ?? true,
+            selectedIdProps: [selectedIds, setSelectedIds],
+            onChange: (ids) => {
+              if (acSlot?.multiple) {
+                controllerOnChange(ids);
+                onFieldChange(ids);
+              } else {
+                const single = Array.isArray(ids) ? ids[0] ?? "" : ids ?? "";
+                controllerOnChange(single);
+                onFieldChange(single);
+              }
+            },
+            onDelete: (id) => {
+              const next = (selectedIds || []).filter((s) => s !== id);
+              if (acSlot?.multiple ?? true) {
+                controllerOnChange(next);
+                onFieldChange(next);
+              } else {
+                controllerOnChange("");
+                onFieldChange("");
+              }
+            },
+            error: !!error
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FieldHelperText, { error, errorMsg, helpers: [helperText] })
+      ]
+    }
+  );
+}
+export {
+  AutocompleteField
+};
+//# sourceMappingURL=AutocompleteField-ZKNU2IRR.mjs.map

package/dist/AutocompleteField-ZKNU2IRR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/compound/UseForm/src/Fields/AutocompleteField.tsx"],"sourcesContent":["import React from 'react';\nimport { Controller, useFormContext, type FieldError } from 'react-hook-form';\nimport { Box } from '@/ele/Box';\nimport { FormLabel, FormControl } from '@/ele/Form';\nimport { FieldHelperText } from '../_utils/helperText';\nimport { GitHubPicker, OptionClass, type OptionParams } from '@/ele/Autocomplete';\nimport { FieldConfig, FormTypeMap, InferFormDataType } from '../_utils';\nimport { getFieldExplanation, mergeFieldSx } from '../_utils/helpers';\nimport Explanation from './Explanation';\nimport { FIELD_TYPEs } from '../_utils/constants';\nimport type { AutocompleteSlotProps } from '../_utils/slotProps';\n\ninterface AutocompleteFieldProps<T extends FormTypeMap = FormTypeMap> {\n  field: Extract<FieldConfig<T>, { type: typeof FIELD_TYPEs.autocomplete }>;\n}\n\ntype AutocompleteUseOptions = NonNullable<AutocompleteSlotProps['useOptions']>;\n\nconst EMPTY_OPTIONS: OptionParams[] = [];\n\nfunction toOptionClass(option: OptionParams | OptionClass): OptionClass {\n  return option instanceof OptionClass ? option : new OptionClass(option as OptionParams);\n}\n\nexport const AutocompleteField = <T extends FormTypeMap = FormTypeMap>({ field }: AutocompleteFieldProps<T>) => {\n  const acSlot = field.slotProps as AutocompleteSlotProps | undefined;\n  if (acSlot?.useOptions) {\n    return <AutocompleteFieldWithOptions field={field} useOptions={acSlot.useOptions} />;\n  }\n  return <AutocompleteFieldView field={field} options={acSlot?.options ?? EMPTY_OPTIONS} />;\n};\n\nconst AutocompleteFieldWithOptions = <T extends FormTypeMap>({\n  field,\n  useOptions,\n}: AutocompleteFieldProps<T> & { useOptions: AutocompleteUseOptions }) => {\n  const { options = EMPTY_OPTIONS } = useOptions();\n  return <AutocompleteFieldView field={field} options={options} />;\n};\n\nconst AutocompleteFieldView = <T extends FormTypeMap>({\n  field,\n  options,\n}: AutocompleteFieldProps<T> & { options: OptionParams[] }) => {\n  const { control, getValues } = useFormContext();\n  const {\n    name,\n    label,\n    required,\n    disabled,\n    sx,\n    size,\n    slotProps,\n    errorMsg,\n    defaultValue,\n  } = field;\n\n  const acSlot = slotProps as AutocompleteSlotProps | undefined;\n  const mergedOptions = React.useMemo(\n    () => options.map(toOptionClass),\n    [options],\n  );\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      defaultValue={defaultValue}\n      render={({ field: { onChange: controllerOnChange, value }, fieldState: { error } }) => (\n        <AutocompletePicker\n          value={value}\n          controllerOnChange={controllerOnChange}\n          mergedOptions={mergedOptions}\n          acSlot={acSlot}\n          disabled={disabled}\n          required={required}\n          error={error}\n          errorMsg={errorMsg}\n          helperText={field.helperText}\n          label={label}\n          size={size}\n          sx={sx}\n          explanation={getFieldExplanation(field)}\n          onFieldChange={(next) => {\n            field.onChange?.(next, getValues() as InferFormDataType<T>);\n          }}\n        />\n      )}\n    />\n  );\n};\n\ntype AutocompletePickerProps = {\n  value: unknown;\n  controllerOnChange: (value: unknown) => void;\n  mergedOptions: OptionClass[];\n  acSlot: AutocompleteSlotProps | undefined;\n  disabled?: boolean;\n  required?: boolean;\n  error: FieldError | undefined;\n  errorMsg?: string;\n  helperText?: string;\n  label?: string;\n  size?: { width?: number | string; height?: number | string };\n  sx?: Record<string, unknown>;\n  explanation?: React.ComponentProps<typeof Explanation>['explanation'];\n  onFieldChange: (next: unknown) => void;\n};\n\nfunction AutocompletePicker({\n  value,\n  controllerOnChange,\n  mergedOptions,\n  acSlot,\n  disabled,\n  required,\n  error,\n  errorMsg,\n  helperText,\n  label,\n  size,\n  sx,\n  explanation,\n  onFieldChange,\n}: AutocompletePickerProps) {\n  const [selectedIds, setSelectedIds] = React.useState<string[]>(\n    Array.isArray(value) ? value : (value ? [value as string] : []),\n  );\n\n  React.useEffect(() => {\n    const next = Array.isArray(value) ? value : (value ? [value as string] : []);\n    setSelectedIds(next as string[]);\n  }, [value]);\n\n  return (\n    <FormControl\n      disabled={disabled}\n      required={required}\n      error={!!error}\n      fullWidth\n      size=\"small\"\n      sx={mergeFieldSx(size, sx)}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }}>\n        <FormLabel component=\"legend\">{label}</FormLabel>\n        <Explanation explanation={explanation} />\n      </Box>\n      <Box sx={{ py: 1 }}>\n        <GitHubPicker\n          options={mergedOptions}\n          variant={acSlot?.variant}\n          color={acSlot?.color}\n          multiple={acSlot?.multiple ?? true}\n          selectedIdProps={[selectedIds, setSelectedIds]}\n          onChange={(ids) => {\n            if (acSlot?.multiple) {\n              controllerOnChange(ids);\n              onFieldChange(ids);\n            } else {\n              const single = Array.isArray(ids) ? ids[0] ?? '' : ids ?? '';\n              controllerOnChange(single);\n              onFieldChange(single);\n            }\n          }}\n          onDelete={(id: string) => {\n            const next = (selectedIds || []).filter((s) => s !== id);\n            if (acSlot?.multiple ?? true) {\n              controllerOnChange(next);\n              onFieldChange(next);\n            } else {\n              controllerOnChange('');\n              onFieldChange('');\n            }\n          }}\n          error={!!error}\n        />\n      </Box>\n      <FieldHelperText error={error} errorMsg={errorMsg} helpers={[helperText]} />\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,WAAW;AAClB,SAAS,YAAY,sBAAuC;AA0BjD,cAoHL,YApHK;AATX,IAAM,gBAAgC,CAAC;AAEvC,SAAS,cAAc,QAAiD;AACtE,SAAO,kBAAkB,SAAc,SAAS,IAAI,OAAY,MAAsB;AACxF;AAEO,IAAM,oBAAoB,CAAsC,EAAE,MAAM,MAAiC;AAC9G,QAAM,SAAS,MAAM;AACrB,MAAI,QAAQ,YAAY;AACtB,WAAO,oBAAC,gCAA6B,OAAc,YAAY,OAAO,YAAY;AAAA,EACpF;AACA,SAAO,oBAAC,yBAAsB,OAAc,SAAS,QAAQ,WAAW,eAAe;AACzF;AAEA,IAAM,+BAA+B,CAAwB;AAAA,EAC3D;AAAA,EACA;AACF,MAA0E;AACxE,QAAM,EAAE,UAAU,cAAc,IAAI,WAAW;AAC/C,SAAO,oBAAC,yBAAsB,OAAc,SAAkB;AAChE;AAEA,IAAM,wBAAwB,CAAwB;AAAA,EACpD;AAAA,EACA;AACF,MAA+D;AAC7D,QAAM,EAAE,SAAS,UAAU,IAAI,eAAe;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS;AACf,QAAM,gBAAgB,MAAM;AAAA,IAC1B,MAAM,QAAQ,IAAI,aAAa;AAAA,IAC/B,CAAC,OAAO;AAAA,EACV;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,oBAAoB,MAAM,GAAG,YAAY,EAAE,MAAM,EAAE,MAC/E;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY,MAAM;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA,aAAa,oBAAoB,KAAK;AAAA,UACtC,eAAe,CAAC,SAAS;AACvB,kBAAM,WAAW,MAAM,UAAU,CAAyB;AAAA,UAC5D;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;AAmBA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM;AAAA,IAC1C,MAAM,QAAQ,KAAK,IAAI,QAAS,QAAQ,CAAC,KAAe,IAAI,CAAC;AAAA,EAC/D;AAEA,QAAM,UAAU,MAAM;AACpB,UAAM,OAAO,MAAM,QAAQ,KAAK,IAAI,QAAS,QAAQ,CAAC,KAAe,IAAI,CAAC;AAC1E,mBAAe,IAAgB;AAAA,EACjC,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,CAAC,CAAC;AAAA,MACT,WAAS;AAAA,MACT,MAAK;AAAA,MACL,IAAI,aAAa,MAAM,EAAE;AAAA,MAEzB;AAAA,6BAACA,UAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,aAAa,GAC7E;AAAA,8BAAC,gBAAU,WAAU,UAAU,iBAAM;AAAA,UACrC,oBAAC,uBAAY,aAA0B;AAAA,WACzC;AAAA,QACA,oBAACA,UAAA,EAAI,IAAI,EAAE,IAAI,EAAE,GACf;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,SAAS,QAAQ;AAAA,YACjB,OAAO,QAAQ;AAAA,YACf,UAAU,QAAQ,YAAY;AAAA,YAC9B,iBAAiB,CAAC,aAAa,cAAc;AAAA,YAC7C,UAAU,CAAC,QAAQ;AACjB,kBAAI,QAAQ,UAAU;AACpB,mCAAmB,GAAG;AACtB,8BAAc,GAAG;AAAA,cACnB,OAAO;AACL,sBAAM,SAAS,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO;AAC1D,mCAAmB,MAAM;AACzB,8BAAc,MAAM;AAAA,cACtB;AAAA,YACF;AAAA,YACA,UAAU,CAAC,OAAe;AACxB,oBAAM,QAAQ,eAAe,CAAC,GAAG,OAAO,CAAC,MAAM,MAAM,EAAE;AACvD,kBAAI,QAAQ,YAAY,MAAM;AAC5B,mCAAmB,IAAI;AACvB,8BAAc,IAAI;AAAA,cACpB,OAAO;AACL,mCAAmB,EAAE;AACrB,8BAAc,EAAE;AAAA,cAClB;AAAA,YACF;AAAA,YACA,OAAO,CAAC,CAAC;AAAA;AAAA,QACX,GACF;AAAA,QACA,oBAAC,mBAAgB,OAAc,UAAoB,SAAS,CAAC,UAAU,GAAG;AAAA;AAAA;AAAA,EAC5E;AAEJ;","names":["default"]}

package/dist/AvatarField-SAODT3CZ.mjs

@@ -0,0 +1,275 @@
+import {
+  Cropper_default
+} from "./chunk-RXBQ7KXF.mjs";
+import {
+  AvatarButton
+} from "./chunk-Y74ALKBL.mjs";
+import "./chunk-27KYFU7R.mjs";
+import {
+  FieldHelperText
+} from "./chunk-MI64T62E.mjs";
+import {
+  Explanation_default,
+  getFieldExplanation,
+  mergeFieldSx
+} from "./chunk-UTVSYS6S.mjs";
+import "./chunk-EW4DTFH3.mjs";
+import {
+  MuiModal
+} from "./chunk-UDREPVEY.mjs";
+import {
+  CLASSNAMEs
+} from "./chunk-CWFWRZWU.mjs";
+import "./chunk-HR3A4H4E.mjs";
+import "./chunk-TDRA5EZI.mjs";
+import "./chunk-3DQINB57.mjs";
+import "./chunk-BGB7JHIU.mjs";
+import {
+  MuiFormLabel,
+  default as default5
+} from "./chunk-T4X375IG.mjs";
+import "./chunk-3VUAM2GY.mjs";
+import "./chunk-56TI2ZBT.mjs";
+import "./chunk-MDAUF7IL.mjs";
+import "./chunk-UMJ5SCIQ.mjs";
+import "./chunk-I5JWS4Z7.mjs";
+import "./chunk-XIMFP6RB.mjs";
+import {
+  PreviewableFile
+} from "./chunk-AAH2O24U.mjs";
+import "./chunk-JIU5GVM7.mjs";
+import "./chunk-4Q54P737.mjs";
+import "./chunk-OP6LKXPA.mjs";
+import {
+  default79 as default4
+} from "./chunk-ZVFYOXDE.mjs";
+import "./chunk-4RPFRNXG.mjs";
+import {
+  default as default2,
+  default2 as default3
+} from "./chunk-S6EZVRZC.mjs";
+import "./chunk-FJ6ZGZIA.mjs";
+
+// src/components/compound/UseForm/src/Fields/AvatarField.tsx
+import React from "react";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AVATAR_CROP_CONFIG = { width: 200, unit: "px" };
+var AvatarCropPreview = React.forwardRef((_, ref) => {
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref,
+      width: 200,
+      height: 200,
+      style: {
+        width: 200,
+        height: 200,
+        maxWidth: "100%",
+        maxHeight: "100%",
+        border: "1px dashed grey",
+        borderRadius: "50%",
+        objectFit: "contain",
+        backgroundColor: "transparent"
+      }
+    }
+  );
+});
+AvatarCropPreview.displayName = "AvatarCropPreview";
+function acceptToInputAccept(accept) {
+  if (!accept) return "image/*";
+  if (typeof accept === "string") return accept;
+  const parts = [];
+  Object.entries(accept).forEach(([mime, exts]) => {
+    parts.push(mime);
+    if (Array.isArray(exts)) parts.push(...exts);
+  });
+  return parts.length ? parts.join(",") : "image/*";
+}
+var AvatarField = ({ field }) => {
+  const watchKey = field.slotProps?.watchAvatarNameKey;
+  if (watchKey) {
+    return /* @__PURE__ */ jsx(AvatarFieldWithNameWatch, { field, watchKey });
+  }
+  return /* @__PURE__ */ jsx(AvatarFieldView, { field, watchedName: void 0 });
+};
+var AvatarFieldWithNameWatch = ({
+  field,
+  watchKey
+}) => {
+  const { control } = useFormContext();
+  const watchedName = useWatch({
+    control,
+    name: watchKey
+  });
+  return /* @__PURE__ */ jsx(AvatarFieldView, { field, watchedName });
+};
+var AvatarFieldView = ({
+  field,
+  watchedName
+}) => {
+  const { control, getValues, setValue } = useFormContext();
+  const {
+    name,
+    label,
+    required,
+    disabled,
+    sx,
+    size,
+    slotProps,
+    errorMsg,
+    defaultValue
+  } = field;
+  const avatarSlot = slotProps;
+  const [editorOpen, setEditorOpen] = React.useState(false);
+  const [editorFiles, setEditorFiles] = React.useState([]);
+  const initialFileRef = React.useRef(null);
+  const transientBlobUrlsRef = React.useRef([]);
+  const inputAccept = acceptToInputAccept(avatarSlot?.accept);
+  const backgroundIcon = (typeof avatarSlot?.useBackgroundIcon === "function" ? avatarSlot?.useBackgroundIcon() : null) || avatarSlot?.backgroundIcon;
+  const displayNameRaw = (avatarSlot?.watchAvatarNameKey ? watchedName : void 0) ?? avatarSlot?.avatarName ?? avatarSlot?.name ?? "";
+  const displayName = String(displayNameRaw ?? "").trim() || void 0;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control,
+      name,
+      defaultValue: defaultValue ?? null,
+      render: ({ field: { onChange, value }, fieldState: { error } }) => {
+        const fileValue = value ?? null;
+        const src = fileValue?.url || fileValue?.blobUrl || "";
+        const openEditor = () => {
+          initialFileRef.current = fileValue;
+          setEditorFiles(fileValue ? [fileValue] : []);
+          setEditorOpen(true);
+        };
+        const closeEditor = () => {
+          setEditorOpen(false);
+          const init = initialFileRef.current;
+          setEditorFiles(init ? [init] : []);
+          transientBlobUrlsRef.current.forEach((u) => {
+            try {
+              URL.revokeObjectURL(u);
+            } catch {
+            }
+          });
+          transientBlobUrlsRef.current = [];
+        };
+        const handleSave = async (url) => {
+          const next = url ? await new PreviewableFile({ url }).downloadFile() : null;
+          if (url) {
+            try {
+              URL.revokeObjectURL(url);
+            } catch {
+            }
+          }
+          onChange(next);
+          try {
+            setValue(String(name), next, { shouldDirty: true, shouldTouch: true });
+          } catch {
+          }
+          ;
+          field.onChange?.(next, getValues());
+          initialFileRef.current = next;
+          setEditorFiles(next ? [next] : []);
+          setEditorOpen(false);
+        };
+        const onFileSelectFromSelector = (file) => {
+          if (!file) {
+            setEditorFiles([]);
+            return;
+          }
+          const blobUrl = URL.createObjectURL(file);
+          transientBlobUrlsRef.current.push(blobUrl);
+          const next = new PreviewableFile({
+            path: file.name,
+            blobUrl,
+            filename: file.name,
+            mimeType: file.type,
+            size: file.size,
+            fileType: file.type.startsWith("image/") ? "image" : "other"
+          });
+          setEditorFiles([next]);
+        };
+        return /* @__PURE__ */ jsxs(
+          default5,
+          {
+            className: CLASSNAMEs.compound.useForm.avatarField,
+            disabled,
+            required,
+            error: !!error,
+            fullWidth: true,
+            size: "small",
+            sx: mergeFieldSx(size, sx),
+            children: [
+              /* @__PURE__ */ jsxs(default3, { direction: "column", alignItems: "center", justifyContent: "center", gap: 0.5, children: [
+                /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1 }, children: [
+                  /* @__PURE__ */ jsx(MuiFormLabel, { component: "legend", children: label }),
+                  /* @__PURE__ */ jsx(Explanation_default, { explanation: getFieldExplanation(field) })
+                ] }),
+                /* @__PURE__ */ jsx(default2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: /* @__PURE__ */ jsx(default2, { sx: { cursor: disabled ? "not-allowed" : "pointer" }, children: /* @__PURE__ */ jsx(
+                  AvatarButton,
+                  {
+                    onClick: disabled ? void 0 : openEditor,
+                    size: avatarSlot?.size,
+                    dim: avatarSlot?.dim,
+                    name: displayName,
+                    src,
+                    backgroundIcon: src ? void 0 : backgroundIcon,
+                    icon: /* @__PURE__ */ jsx(default4, { fontSize: "small" }),
+                    "aria-label": label || "Avatar"
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx(FieldHelperText, { error, errorMsg, helpers: [field.helperText] })
+              ] }),
+              editorOpen ? /* @__PURE__ */ jsx(
+                MuiModal,
+                {
+                  className: CLASSNAMEs.elemental.modal,
+                  openProps: [editorOpen, setEditorOpen],
+                  onClose: closeEditor,
+                  title: label || "Avatar",
+                  size: { w: "70vw", h: "80vh" },
+                  children: /* @__PURE__ */ jsx(
+                    default2,
+                    {
+                      sx: {
+                        display: "flex",
+                        flexDirection: "column",
+                        height: "100%",
+                        gap: 2,
+                        overflow: "hidden"
+                      },
+                      children: /* @__PURE__ */ jsx(default2, { sx: { flex: "1 1 auto", minHeight: 0 }, children: /* @__PURE__ */ jsx(
+                        Cropper_default,
+                        {
+                          setImgNull: () => setEditorFiles([]),
+                          blobUrl: editorFiles?.[0]?.blobUrl || "",
+                          onSave: handleSave,
+                          onClear: () => handleSave(""),
+                          circularCrop: true,
+                          defaultRatio: 1,
+                          resizeCropEnabled: true,
+                          cropConfig: AVATAR_CROP_CONFIG,
+                          PreviewRenderer: AvatarCropPreview,
+                          showFileSelector: true,
+                          fileSelectorAccept: inputAccept,
+                          fileSelectorButtonLabel: "Select Image",
+                          onFileSelect: onFileSelectFromSelector
+                        }
+                      ) })
+                    }
+                  )
+                }
+              ) : null
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+export {
+  AvatarField
+};
+//# sourceMappingURL=AvatarField-SAODT3CZ.mjs.map

package/dist/AvatarField-SAODT3CZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/compound/UseForm/src/Fields/AvatarField.tsx"],"sourcesContent":["import React from 'react';\nimport { Controller, useFormContext, useWatch } from 'react-hook-form';\nimport { Box, Stack } from '@/ele/Box';\nimport { FormControl, FormLabel } from '@/ele/Form';\nimport { EditIcon } from '@/icons/MuiIcon';\n\nimport { FieldHelperText } from '../_utils/helperText';\nimport { AvatarButton } from '@/ele/Avatar';\nimport { MuiModal } from '@/ele/Modal';\nimport { Cropper } from '@/ele/Image';\n\nimport PreviewableFile from '@/_utils/classes/PreviewableFile';\nimport { FieldConfig, FormTypeMap, InferFormDataType } from '../_utils';\nimport { FIELD_TYPEs } from '../_utils/constants';\nimport type { AvatarSlotProps } from '../_utils/slotProps';\nimport Explanation from './Explanation';\nimport { CLASSNAMEs } from '@/_utils/_const/classNames';\nimport { getFieldExplanation, mergeFieldSx } from '../_utils/helpers';\n\ninterface AvatarFieldProps<T extends FormTypeMap = FormTypeMap> {\n  field: Extract<FieldConfig<T>, { type: typeof FIELD_TYPEs.avatar }>;\n}\n\nconst AVATAR_CROP_CONFIG = { width: 200, unit: 'px' } as const;\n\nconst AvatarCropPreview = React.forwardRef<HTMLCanvasElement>((_, ref) => {\n  return (\n    <canvas\n      ref={ref}\n      width={200}\n      height={200}\n      style={{\n        width: 200,\n        height: 200,\n        maxWidth: '100%',\n        maxHeight: '100%',\n        border: '1px dashed grey',\n        borderRadius: '50%',\n        objectFit: 'contain',\n        backgroundColor: 'transparent',\n      }}\n    />\n  );\n});\n\nAvatarCropPreview.displayName = 'AvatarCropPreview';\n\nfunction acceptToInputAccept(accept: AvatarSlotProps['accept']): string {\n  if (!accept) return 'image/*';\n  if (typeof accept === 'string') return accept;\n\n  const parts: string[] = [];\n  Object.entries(accept).forEach(([mime, exts]) => {\n    parts.push(mime);\n    if (Array.isArray(exts)) parts.push(...exts);\n  });\n  return parts.length ? parts.join(',') : 'image/*';\n}\n\nexport const AvatarField = <T extends FormTypeMap = FormTypeMap>({ field }: AvatarFieldProps<T>) => {\n  const watchKey = (field.slotProps as AvatarSlotProps | undefined)?.watchAvatarNameKey;\n  if (watchKey) {\n    return <AvatarFieldWithNameWatch field={field} watchKey={watchKey} />;\n  }\n  return <AvatarFieldView field={field} watchedName={undefined} />;\n};\n\nconst AvatarFieldWithNameWatch = <T extends FormTypeMap>({\n  field,\n  watchKey,\n}: AvatarFieldProps<T> & { watchKey: string }) => {\n  const { control } = useFormContext();\n  const watchedName = useWatch({\n    control,\n    name: watchKey as never,\n  });\n  return <AvatarFieldView field={field} watchedName={watchedName} />;\n};\n\nconst AvatarFieldView = <T extends FormTypeMap>({\n  field,\n  watchedName,\n}: AvatarFieldProps<T> & { watchedName: unknown }) => {\n  const { control, getValues, setValue } = useFormContext();\n\n  const {\n    name,\n    label,\n    required,\n    disabled,\n    sx,\n    size,\n    slotProps,\n    errorMsg,\n    defaultValue,\n  } = field;\n\n  const avatarSlot = slotProps as AvatarSlotProps | undefined;\n  const [editorOpen, setEditorOpen] = React.useState(false);\n  const [editorFiles, setEditorFiles] = React.useState<PreviewableFile[]>([]);\n  const initialFileRef = React.useRef<PreviewableFile | null>(null);\n  const transientBlobUrlsRef = React.useRef<string[]>([]);\n\n  const inputAccept = acceptToInputAccept(avatarSlot?.accept);\n  const backgroundIcon = (typeof avatarSlot?.useBackgroundIcon === 'function'\n    ? avatarSlot?.useBackgroundIcon()\n    : null) || avatarSlot?.backgroundIcon;\n\n  const displayNameRaw =\n    (avatarSlot?.watchAvatarNameKey ? watchedName : undefined) ??\n    avatarSlot?.avatarName ??\n    avatarSlot?.name ??\n    '';\n  const displayName = String(displayNameRaw ?? '').trim() || undefined;\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      defaultValue={(defaultValue ?? null) as PreviewableFile | null}\n      render={({ field: { onChange, value }, fieldState: { error } }) => {\n        const fileValue = (value ?? null) as PreviewableFile | null;\n        const src = fileValue?.url || fileValue?.blobUrl || '';\n\n        // unified helper text component\n        // use FieldHelperText to render slot or validation messages consistently\n\n        const openEditor = () => {\n          initialFileRef.current = fileValue;\n          setEditorFiles(fileValue ? [fileValue] : []);\n          setEditorOpen(true);\n        };\n\n        const closeEditor = () => {\n          setEditorOpen(false);\n          const init = initialFileRef.current;\n          setEditorFiles(init ? [init] : []);\n\t\t\t// revoke any blob urls created during this editor session\n\t\t\ttransientBlobUrlsRef.current.forEach((u) => {\n\t\t\t\ttry { URL.revokeObjectURL(u); } catch { /* ignore */ }\n\t\t\t});\n\t\t\ttransientBlobUrlsRef.current = [];\n        };\n\n        const handleSave = async (url: string) => {\n          const next = url\n            ? await new PreviewableFile({ url }).downloadFile()\n            : null;\n\t\t\t// url from Cropper is a blob URL we no longer need once downloaded\n\t\t\tif (url) {\n\t\t\t\ttry { URL.revokeObjectURL(url); } catch { /* ignore */ }\n\t\t\t}\n\n          onChange(next);\n          // ensure react-hook-form value is set directly as well\n          try { setValue(String(name), next, { shouldDirty: true, shouldTouch: true }); } catch { /* ignore */ };\n          field.onChange?.(next, getValues() as InferFormDataType<T>);\n\n          initialFileRef.current = next;\n          setEditorFiles(next ? [next] : []);\n          setEditorOpen(false);\n        };\n\n      // onFileSelect handler used by Cropper's built-in selector\n      const onFileSelectFromSelector = (file: File | null) => {\n        if (!file) {\n          setEditorFiles([]);\n          return;\n        }\n\n        const blobUrl = URL.createObjectURL(file);\n        transientBlobUrlsRef.current.push(blobUrl);\n\n        const next = new PreviewableFile({\n          path: file.name,\n          blobUrl,\n          filename: file.name,\n          mimeType: file.type,\n          size: file.size,\n          fileType: file.type.startsWith('image/') ? 'image' : 'other',\n        });\n\n        setEditorFiles([next]);\n      };\n\n        return (\n          <FormControl\n            className={CLASSNAMEs.compound.useForm.avatarField}\n            disabled={disabled}\n            required={required}\n            error={!!error}\n            fullWidth\n            size=\"small\"\n            sx={mergeFieldSx(size, sx)}\n          >\n            <Stack direction=\"column\" alignItems=\"center\" justifyContent=\"center\" gap={0.5}>\n              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>\n                <FormLabel component=\"legend\">{label}</FormLabel>\n                <Explanation explanation={getFieldExplanation(field)} />\n              </Box>\n\n              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, }}>\n                <Box sx={{ cursor: disabled ? 'not-allowed' : 'pointer' }}>\n                  <AvatarButton\n                    onClick={disabled ? undefined : openEditor}\n                    size={avatarSlot?.size}\n                    dim={avatarSlot?.dim}\n                    name={displayName}\n                    src={src}\n                    backgroundIcon={src ? undefined : backgroundIcon}\n                    icon={<EditIcon fontSize=\"small\" />}\n                    aria-label={label || 'Avatar'}\n                  />\n                </Box>\n              </Box>\n\n              <FieldHelperText error={error} errorMsg={errorMsg} helpers={[field.helperText]} />\n            </Stack>\n\n            {editorOpen ? (\n            <MuiModal\n              className={CLASSNAMEs.elemental.modal}\n              openProps={[editorOpen, setEditorOpen]}\n              onClose={closeEditor}\n              title={label || 'Avatar'}\n              size={{ w: '70vw', h: '80vh' }}\n            >\n              <Box\n                sx={{\n                  display: 'flex',\n                  flexDirection: 'column',\n                  height: '100%',\n                  gap: 2,\n                  overflow: 'hidden',\n                }}>\n                <Box sx={{ flex: '1 1 auto', minHeight: 0 }}>\n                  <Cropper\n                    setImgNull={() => setEditorFiles([])}\n                    blobUrl={editorFiles?.[0]?.blobUrl || ''}\n                    onSave={handleSave}\n                    onClear={() => handleSave('')}\n                    circularCrop\n                    defaultRatio={1}\n                    resizeCropEnabled\n                    cropConfig={AVATAR_CROP_CONFIG}\n                    PreviewRenderer={AvatarCropPreview}\n                    showFileSelector\n                    fileSelectorAccept={inputAccept}\n                    fileSelectorButtonLabel=\"Select Image\"\n                    onFileSelect={onFileSelectFromSelector}\n                  />\n                </Box>\n              </Box>\n            </MuiModal>\n            ) : null}\n\n            \n          </FormControl>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":"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","names":["default"]}

package/dist/CodeEditor-JF55ZNVD.mjs

@@ -0,0 +1,34 @@
+"use client";
+import "./chunk-FJ6ZGZIA.mjs";
+
+// src/components/elemental/JsonEditor/src/JsonEditor/CodeEditor.tsx
+import CodeMirror from "@uiw/react-codemirror";
+import { json } from "@codemirror/lang-json";
+import { githubLight, githubDark } from "@uiw/codemirror-theme-github";
+import { useColorScheme } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+var jsonExtensions = [json()];
+var CodeEditor = ({
+  value,
+  onChange,
+  onKeyDown
+}) => {
+  const { mode } = useColorScheme();
+  const theme = mode === "light" ? githubLight : githubDark;
+  return /* @__PURE__ */ jsx(
+    CodeMirror,
+    {
+      theme,
+      value,
+      width: "100%",
+      extensions: jsonExtensions,
+      onChange,
+      onKeyDown
+    }
+  );
+};
+var CodeEditor_default = CodeEditor;
+export {
+  CodeEditor_default as default
+};
+//# sourceMappingURL=CodeEditor-JF55ZNVD.mjs.map

package/dist/CodeEditor-JF55ZNVD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/elemental/JsonEditor/src/JsonEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\nimport CodeMirror from '@uiw/react-codemirror'\nimport { json } from '@codemirror/lang-json'\nimport {  type TextEditorProps, } from 'json-edit-react'\nimport { githubLight, githubDark } from '@uiw/codemirror-theme-github'\nimport { useColorScheme } from '@mui/material/styles'\n\nconst jsonExtensions = [json()]\n\nconst CodeEditor: React.FC<TextEditorProps> = ({\n  value,\n  onChange,\n  onKeyDown,\n}) => {\n  const { mode } = useColorScheme()\n  const theme = mode===\"light\"?githubLight:githubDark\n\n  return (\n    <CodeMirror\n      theme={theme}\n      value={value}\n      width=\"100%\"\n      extensions={jsonExtensions}\n      onChange={onChange}\n      onKeyDown={onKeyDown}\n    />\n  )\n}\n\nexport default CodeEditor\n"],"mappings":";;;;AAEA,OAAO,gBAAgB;AACvB,SAAS,YAAY;AAErB,SAAS,aAAa,kBAAkB;AACxC,SAAS,sBAAsB;AAa3B;AAXJ,IAAM,iBAAiB,CAAC,KAAK,CAAC;AAE9B,IAAM,aAAwC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,QAAQ,SAAO,UAAQ,cAAY;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAM;AAAA,MACN,YAAY;AAAA,MACZ;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}