material-plus-ui 1.7.0 → 1.9.0

package/dist/types.d.ts

@@ -309,8 +309,70 @@ export interface MPTimelineSeries {
     /** Overrides the palette slot this row would otherwise take. */
     color?: MPColor | (string & {});
 }
+/**
+ * How the series of a stacking chart are piled up.
+ *
+ * - `false` — side by side, or overlapping. The parts are compared with each
+ *   other.
+ * - `true` — on each other, so the far edge is the total. The totals are
+ *   compared and the parts make them up.
+ * - `'percent'` — on each other and normalised, so every column is full. The
+ *   **composition** is compared and the totals are gone from the picture.
+ *
+ * A percent stack answers "what is this made of" and refuses to answer "how
+ * much of it is there", which is the trade it makes and the reason it is a
+ * third setting rather than a flag on the second. Two columns of wildly
+ * different size are drawn identically, so the total belongs somewhere else on
+ * the page — a figure beside the chart, or a second chart.
+ *
+ * A negative has no share of a whole, so a percent stack leaves it out the way
+ * `MPPieChart` does. The table behind the chart still has the number.
+ */
+export type MPChartStack = boolean | 'percent';
 /** How a line gets from one point to the next. */
 export type MPChartCurve = 'linear' | 'smooth' | 'step';
+/**
+ * What a line or an area does where a series has no value.
+ *
+ * - `break` — the line stops and starts again on the far side. The default,
+ *   because a straight run through values nobody has is the one kind of
+ *   invented data a reader never questions: it looks exactly like the rest of
+ *   the line.
+ * - `connect` — the two sides are joined, and the joining run is drawn
+ *   **dashed** so the picture still says which part of it was measured. An
+ *   area's fill closes across the gap as well.
+ * - `zero` — the missing reading is drawn at zero, and the value axis is
+ *   widened to hold it. Right where a gap really does mean "none of it
+ *   happened", and wrong where it means "nobody was counting".
+ *
+ * Only the drawing changes. The hover panel and the table behind the chart
+ * still report a gap as a gap, whichever of the three is chosen, because they
+ * are the copy of the data a reader gets when they need the number itself.
+ */
+export type MPChartGaps = 'break' | 'connect' | 'zero';
+/**
+ * What an axis does with a tick label too wide for the room it has.
+ *
+ * - `auto` — leaves the labels flat while they fit and turns them when they do
+ *   not. The default, because flat labels are what a reader takes in fastest
+ *   and a name cut to "Onbo…" has lost the thing it was there to say.
+ * - `truncate` — cuts a long label with an ellipsis and never turns anything.
+ * - `rotate` — turns every label 45°.
+ * - `vertical` — stands every label on end.
+ *
+ * The last two turn **all** of the labels rather than only the long ones: a row
+ * at two different angles is a row a reader has to scan twice.
+ *
+ * Only the axis along the **bottom** reads it. Labels stacked up the side
+ * already have a row each, which is the room a turn would be buying them.
+ *
+ * And `auto` turns names rather than ticks. A value axis is a ruler, so showing
+ * every nth of its labels loses nothing a reader cannot interpolate; where the
+ * bottom of a chart is one — a bar chart on its side, a scatter — `auto` leaves
+ * it striding. `rotate` and `vertical` still apply there when they are asked
+ * for by name.
+ */
+export type MPChartTickLabels = 'auto' | 'truncate' | 'rotate' | 'vertical';
 /**
  * Which values are written onto the marks themselves.
  *
@@ -320,6 +382,20 @@ export type MPChartCurve = 'linear' | 'smooth' | 'step';
  * `all` is there for the eight-bar chart where it genuinely is the answer.
  */
 export type MPChartValueLabels = 'none' | 'last' | 'extremes' | 'all';
+/**
+ * What ink a chart writes the text naming a series in.
+ *
+ * `'ink'` is `on-surface-variant` — one colour for every name, whichever mark
+ * it belongs to. `'series'` matches the name to its mark, which pairs a long
+ * legend with a crowded plot faster than a swatch alone can.
+ *
+ * The trade is contrast. The eight palette slots are fitted to 3:1 against the
+ * surface, which is the bar a **mark** has to clear; small text is held to
+ * 4.5:1, and a series colour does not reach it. So the swatch carries the
+ * colour by default and the word stays legible, and this is the caller saying
+ * their chart is better off the other way round.
+ */
+export type MPChartLabelColor = 'ink' | 'series';
 /**
  * What the pointer uncovers.
  *
@@ -348,13 +424,42 @@ export interface MPChartTooltipItem {
 export interface MPChartTooltipContext {
     index: number;
     category: MPChartCategory;
-    /** Only the series that are visible and have a value here. */
+    /** Only the series that are visible and have a value here, in `sort`'s order. */
     items: readonly MPChartTooltipItem[];
+    /** What they add up to, where the chart is a picture of that sum. */
+    total?: string;
 }
+/**
+ * What order the rows of a hover panel come in.
+ *
+ * - `series` — the order they were passed, which is the order the legend lists
+ *   them in and the order the colours were handed out in. A reader who has
+ *   learned the legend can find a row without reading it.
+ * - `value` — largest first. What a chart of eight series wants: the row a
+ *   reader is looking for is usually the big one, and hunting for it down a
+ *   list in a fixed order is the work the panel exists to save.
+ *
+ * Neither is right for every chart, which is why there is a prop. Ties keep
+ * their series order, so a panel never reorders itself over nothing.
+ */
+export type MPChartTooltipSort = 'series' | 'value';
 /** The hover layer, where `true` and `false` are not enough. */
 export interface MPChartTooltip {
     /** @default 'index', or 'item' where the marks are not arranged in columns */
     mode?: MPChartTooltipMode;
+    /** @default 'series' */
+    sort?: MPChartTooltipSort;
+    /**
+     * Adds a row for what the column adds up to.
+     *
+     * On by default where the chart **is** that total — a stack, whose whole
+     * point is the height of the column — and off everywhere else. A percent
+     * stack is left out of that: its total is 100% at every category, and a row
+     * that says the same thing four times is a row nobody reads. An unstacked
+     * chart is off because its series are not parts of anything, and adding them
+     * up would be the panel inventing a quantity.
+     */
+    total?: boolean;
     /**
      * The line dropped through the plot at the active category. On in `index`
      * mode and never drawn in `item` mode: a crosshair says "these numbers all
@@ -402,12 +507,114 @@ export interface MPChartAxis {
     tickCount?: number;
     /** How a tick is written, overriding the chart's own `format`. */
     tickFormat?: (value: MPChartCategory, index: number) => React.ReactNode;
+    /**
+     * What to do with a label too wide for the room it has: cut it, or turn it.
+     *
+     * Read by the axis along the **bottom** only — the category axis on an
+     * upright chart, and the value axis on one turned on its side. Labels down
+     * the left already have a row each.
+     * @default 'auto'
+     */
+    tickLabels?: MPChartTickLabels;
     /**
      * How much room it keeps for its ticks and its label, in pixels. Measured off
      * the ticks themselves otherwise. Set it when a long category name needs
      * more, or when two charts stacked on a dashboard have to line their plots up.
      */
     thickness?: number;
+    /**
+     * Lines and bands drawn across the plot at places on **this** axis' scale — a
+     * target, a threshold, the range a reading should stay inside.
+     *
+     * The scale is widened to hold them, because a target the plot is cropped
+     * above is a target nobody can see. Pin `min` or `max` to stop that.
+     *
+     * Read by an axis that has a scale: the value axis always, and the category
+     * axis where it runs on numbers rather than on names. A row of categories has
+     * no place between two of them for a line to be at.
+     */
+    references?: readonly MPChartReference[];
+}
+/**
+ * A line drawn across the plot at a place on one of its scales, or a band where
+ * it has two ends.
+ *
+ * A target, a service level, the day a release went out, the range a reading is
+ * meant to stay inside. It is **not** data: it is a fact the reader brought
+ * with them, so it is drawn in the chrome's ink rather than out of the series
+ * palette, and a chart is never asked to invent one.
+ *
+ * The axis it is given to is the scale its `value` is on, which is also the
+ * axis it is drawn perpendicular to — a reference on the value axis of an
+ * upright chart is a horizontal line, and the same reference on a chart turned
+ * on its side is a vertical one.
+ */
+export interface MPChartReference {
+    /**
+     * Where it sits, on that axis' own scale. A `Date` on an axis of dates, which
+     * is the one place a reference is most often asked for — today, a release, a
+     * deadline.
+     */
+    value: number | Date;
+    /**
+     * And where it ends, which makes it a **band** rather than a line: the range
+     * a reading should stay inside, the window something was down for.
+     */
+    to?: number | Date;
+    /**
+     * What it is called, written at its own end of the line and read out with the
+     * chart. A line nobody can name is a line nobody can use.
+     */
+    label?: React.ReactNode;
+    /**
+     * Which family it wears. An `MPColor`, or any CSS colour.
+     *
+     * The outline role by default, which is what keeps a reference reading as
+     * chrome rather than as another series. `error` is the one worth reaching
+     * for: a threshold somebody is watching is exactly what that role is for.
+     */
+    color?: MPColor | (string & {});
+    /**
+     * Draws it dashed, so it cannot be mistaken for a gridline or a baseline.
+     * @default true
+     */
+    dashed?: boolean;
+}
+/**
+ * Dragging a range out of a long category axis.
+ *
+ * What it is for is the chart with ninety points on it, where the shape of one
+ * week is inside a picture of a quarter. A reader drags across the plot, the
+ * chart redraws to what they picked, and the scale re-fits to it — so the
+ * window is a *chart of that range* rather than a magnified picture of the
+ * whole one.
+ *
+ * Everything follows the window: the value scale, the hover panel, the spoken
+ * readout and the table behind the picture. The table is what a reader who
+ * cannot see the plot is given **instead** of it, so a table still listing
+ * ninety points would be describing a chart that is not on the page.
+ *
+ * Only a chart whose categories are a row of slots takes it. A scatter has two
+ * value axes and no row to cut, and a pie has no axis at all.
+ */
+export interface MPChartZoom {
+    /**
+     * The range drawn, as a first and last **category index**, or `null` for all
+     * of them. Use with `onRangeChange` for a controlled window.
+     */
+    range?: readonly [number, number] | null;
+    /** Where the window starts out. Ignored once `range` is given. */
+    defaultRange?: readonly [number, number] | null;
+    /** Called with what the reader dragged, and with `null` when they reset it. */
+    onRangeChange?: (range: readonly [number, number] | null) => void;
+    /**
+     * The fewest categories a drag may leave.
+     *
+     * Two, because a window of one category is not a chart of anything — there is
+     * no distance left in it for a line to have travelled.
+     * @default 2
+     */
+    min?: number;
 }
 /** Where the legend sits, and what it does when it is used. */
 export interface MPChartLegend {
@@ -590,8 +797,8 @@ export interface MPStyleProps {
 export interface MPControlEventProps<Element extends HTMLElement = HTMLElement> {
     /**
      * Every keystroke that reaches the control, modifiers included — which makes
-     * this the one to reach for for a combination. It is also the only one of
-     * these where `preventDefault` still means anything.
+     * this the one to reach for when a combination matters. It is also the only
+     * one of these where `preventDefault` still means anything.
      */
     onKeyDown?: React.KeyboardEventHandler<Element>;
     /** The same keystroke released. */

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "material-plus-ui",
-  "version": "1.7.0",
-  "description": "A React component library implementing Material Design 3 — the components other Material libraries do not ship, and wider versions of the ones they do. Built on Base UI and Tailwind CSS v4, themed with CSS custom properties so it can coexist with an existing Material setup. ESM only, types included.",
+  "version": "1.9.0",
+  "description": "A React component library written from the Material Design 3 specification and extended past it — wider versions of the components it names, and the charts, data table and command palette it does not. Built on Base UI and Tailwind CSS v4, themed with CSS custom properties so it coexists with an existing Material setup. ESM only, types included.",
   "type": "module",
   "sideEffects": [
     "**/*.css"
   ],
   "types": "dist/index.d.ts",
-  "author": "CDGet <jooy2.contact@gmail.com>",
+  "author": "CDGet (https://cdget.com)",
   "license": "MIT",
   "homepage": "https://material-plus.cdget.com",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jooy2/material-plus.git"
+    "url": "git+https://github.com/jooy2/material-plus-ui.git"
   },
   "bugs": {
-    "url": "https://github.com/jooy2/material-plus/issues"
+    "url": "https://github.com/jooy2/material-plus-ui/issues"
   },
   "scripts": {
-    "build": "npm run format:fix && node scripts/clean-dist.mjs && tsc --project tsconfig.prod.json && node scripts/specify-imports.mjs && node scripts/annotate-pure.mjs && npm run minify && node scripts/mark-client.mjs && node scripts/build-styles.mjs && node scripts/build-split-styles.mjs && node scripts/measure-bundle.mjs",
+    "build": "npm run format:fix && node scripts/clean-dist.mjs && tsc --project tsconfig.prod.json && node scripts/specify-imports.mjs && node scripts/annotate-pure.mjs && npm run minify && node scripts/mark-client.mjs && node scripts/build-styles.mjs && node scripts/build-split-styles.mjs && node scripts/build-a2ui-catalog.mjs && node scripts/measure-bundle.mjs",
     "lint": "eslint . --ext .js,.ts .",
     "lint:fix": "eslint . --ext .js,.ts --fix .",
     "minify": "terser-glob 'dist/**/*.js' --config-file terser.config.json",
@@ -59,6 +59,11 @@
       "module": "./dist/hooks/index.js",
       "default": "./dist/hooks/index.js"
     },
+    "./a2ui": {
+      "types": "./dist/a2ui/index.d.ts",
+      "module": "./dist/a2ui/index.js",
+      "default": "./dist/a2ui/index.js"
+    },
     "./components/*": {
       "types": "./dist/components/*/index.d.ts",
       "module": "./dist/components/*/index.js",
@@ -124,53 +129,69 @@
     "composition"
   ],
   "devDependencies": {
-    "@base-ui/react": "^1.7.0",
+    "@a2ui/react": "^0.11.1",
+    "@a2ui/web_core": "^0.11.0",
+    "@base-ui/react": "^1.8.0",
     "@eslint/js": "^9.39.1",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.4.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "@typescript-eslint/parser": "^8.68.0",
+    "@types/node": "^26.6.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@typescript-eslint/parser": "^8.70.0",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/browser": "^4.1.11",
-    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/browser": "^5.0.1",
+    "@vitest/browser-playwright": "^5.0.1",
     "esbuild": "^0.28.2",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-n": "^18.3.0",
-    "globals": "^17.11.0",
+    "globals": "^17.12.0",
     "jiti": "^2.7.0",
-    "playwright": "^1.62.1",
-    "postcss": "^8.5.26",
-    "prettier": "^3.9.6",
+    "playwright": "^1.63.0",
+    "postcss": "^8.5.28",
+    "prettier": "^3.9.7",
     "prettier-plugin-tailwindcss": "^0.8.1",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "tailwindcss": "^4.3.3",
     "terser-glob": "^1.2.1",
     "tsx": "^4.23.13",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.68.0",
-    "vite": "^8.2.2",
+    "typescript-eslint": "^8.70.0",
+    "vite": "^8.3.0",
     "vitepress": "^1.6.4",
     "vitepress-i18n": "^1.4.0",
-    "vitepress-sidebar": "^1.39.0",
-    "vitest": "^4.1.11",
-    "vitest-browser-react": "^2.2.0"
+    "vitepress-sidebar": "^1.40.0",
+    "vitest": "^5.0.1",
+    "vitest-browser-react": "^2.3.0",
+    "zod": "^3.25.76",
+    "zod-to-json-schema": "^3.25.2"
   },
   "dependencies": {
     "highlight.js": "^11.12.0",
-    "lucide-react": "^1.37.0"
+    "lucide-react": "^1.47.0"
   },
   "peerDependencies": {
+    "@a2ui/react": "^0.11.0",
+    "@a2ui/web_core": "^0.11.0",
     "@base-ui/react": "^1.7.0",
     "@types/react": "^18.0.0 || ^19.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "zod": "^3.25.76"
   },
   "peerDependenciesMeta": {
+    "@a2ui/react": {
+      "optional": true
+    },
+    "@a2ui/web_core": {
+      "optional": true
+    },
     "@types/react": {
       "optional": true
+    },
+    "zod": {
+      "optional": true
     }
   }
 }

package/.fix.py

@@ -1,92 +0,0 @@
-import pathlib, sys
-def rep(path, old, new):
-    p = pathlib.Path(path); s = p.read_text(encoding='utf-8')
-    if s.count(old) != 1: print(f'FAIL {path}: {s.count(old)}'); sys.exit(1)
-    p.write_text(s.replace(old, new, 1), encoding='utf-8'); print('ok ', path)
-
-EN_OLD = """Yours is appended to the component's own, and nothing is removed to make room for it. So **two utilities setting the same property are resolved by the stylesheet rather than by which of them you wrote.**
-
-Which one that is depends on how the styles were wired up. On the precompiled path it is whichever sheet the application imported second. On the Tailwind path both are generated in one pass, and Tailwind's own ordering decides — which is per property, and not something to work out at the call site:
-
-| You pass     | The component sets    | Which one wins |
-| ------------ | --------------------- | -------------- |
-| `p-8`        | `px-6`                | the component  |
-| `rounded-lg` | `rounded-mp-full`     | the component  |
-| `shadow-lg`  | `shadow-mp-1`         | the component  |
-| `text-lg`    | `text-mp-label-large` | yours          |
-| `bg-red-500` | `bg-mp-primary`       | yours          |
-| `h-20`       | `h-14`                | yours          |
-
-Read the column, not the rows: the answers are what one version of Tailwind happens to emit, and the point is that there is no rule connecting them. `className` is the right tool for what a component does **not** already set — margin, width, grid placement, position, an animation — and the wrong one for taking something over."""
-
-EN_NEW = """Yours is appended to the component's own, and nothing is removed to make room for it. Two classes setting the same property both end up on the element, at equal specificity, and **the one that wins is the one the stylesheet happens to put last** — not the one you wrote.
-
-A class for something the component does not already set always works. That is most of what a class is for, and there is nothing more to know about it:
-
-```tsx
-<MPButton className="mt-4 w-full">Save</MPButton>
-```
-
-Past that it depends on the pair. On the precompiled path it depends on which sheet the application imported second; on the Tailwind path both are generated in one pass and Tailwind's own ordering decides. Measured against this repository's own stylesheet, on an `MPButton` at the default size:
-
-| You pass                     | It sets                  | Result  |
-| ---------------------------- | ------------------------ | ------- |
-| `px-8`                       | `px-6`                   | applies |
-| `px-2`                       | `px-6`                   | ignored |
-| `h-20`                       | `h-14`                   | applies |
-| `h-8`                        | `h-14`                   | ignored |
-| `text-lg`, `text-xs`         | `text-mp-title-medium`   | applies |
-| `bg-red-500`                 | `bg-(--_mp-accent)`      | applies |
-| `rounded-lg`                 | `rounded-mp-full`        | ignored |
-| `shadow-lg`                  | `shadow-mp-1`            | ignored |
-| `p-8`                        | `px-6`                   | ignored |
-| any of the above with a `!`  | —                        | applies |
-
-The first four rows are the ones worth staring at. `px-8` works and `px-2` does not, on the same component and the same property, because Tailwind emits a scale in scale order and the larger step is therefore later — so *making a control bigger tends to work and making it smaller tends not to*. The rest is which of two theme keys Tailwind happened to sort first: the library's `--text-mp-*` land before Tailwind's own, so any `text-*` you pass wins, while `--radius-mp-*` and `--shadow-mp-*` land after, so `rounded-*` and `shadow-*` do not.
-
-None of that is a promise. It is what one version of Tailwind emits, it is per pair rather than per property, and it can move under you when either side adds a token. Treat `className` as the tool for what the component leaves alone."""
-
-KO_OLD = """넘긴 클래스는 컴포넌트 자신의 클래스 뒤에 붙고, 자리를 내주기 위해 지워지는 것은 없습니다. 그래서 **같은 속성을 지정하는 두 유틸리티는 어느 쪽을 썼는지가 아니라 스타일시트가 결정합니다.**
-
-어느 쪽이 되는지는 스타일을 어떻게 연결했는지에 달려 있습니다. 컴파일된 시트를 쓰는 경우에는 애플리케이션이 나중에 import한 시트가 이깁니다. Tailwind를 쓰는 경우에는 둘이 한 번의 패스에서 생성되고 Tailwind 자신의 정렬이 결정하는데, 그 정렬은 속성마다 다르고 호출부에서 따져볼 만한 것이 아닙니다.
-
-| 넘긴 것 | 컴포넌트가 지정한 것 | 이기는 쪽 |
-| --- | --- | --- |
-| `p-8` | `px-6` | 컴포넌트 |
-| `rounded-lg` | `rounded-mp-full` | 컴포넌트 |
-| `shadow-lg` | `shadow-mp-1` | 컴포넌트 |
-| `text-lg` | `text-mp-label-large` | 넘긴 쪽 |
-| `bg-red-500` | `bg-mp-primary` | 넘긴 쪽 |
-| `h-20` | `h-14` | 넘긴 쪽 |
-
-행이 아니라 열을 보세요. 이 답들은 어떤 한 버전의 Tailwind가 그렇게 내놓은 것일 뿐이고, 요점은 이들을 이어 주는 규칙이 없다는 것입니다. `className`은 컴포넌트가 **지정하지 않은** 것 — 마진, 너비, 그리드 배치, 위치, 애니메이션 — 에 쓰는 도구이고, 이미 지정된 것을 가져오는 데 쓰는 도구가 아닙니다."""
-
-KO_NEW = """넘긴 클래스는 컴포넌트 자신의 클래스 뒤에 붙고, 자리를 내주기 위해 지워지는 것은 없습니다. 같은 속성을 지정하는 두 클래스가 같은 명시도로 엘리먼트에 함께 올라가고, **이기는 쪽은 스타일시트가 뒤에 놓은 쪽입니다.** 어느 쪽을 썼는지가 아닙니다.
-
-컴포넌트가 지정하지 않은 것에 대한 클래스는 언제나 적용됩니다. 클래스로 하려는 일의 대부분이 이것이고, 여기에 더 알아야 할 것은 없습니다.
-
-```tsx
-<MPButton className="mt-4 w-full">저장</MPButton>
-```
-
-그 너머는 짝에 따라 다릅니다. 컴파일된 시트를 쓰는 경우에는 애플리케이션이 나중에 import한 시트가 이기고, Tailwind를 쓰는 경우에는 둘이 한 번의 패스에서 생성되어 Tailwind 자신의 정렬이 결정합니다. 이 저장소의 시트로, 기본 크기의 `MPButton`에 대고 실제로 측정한 결과입니다.
-
-| 넘긴 것 | 컴포넌트가 지정한 것 | 결과 |
-| --- | --- | --- |
-| `px-8` | `px-6` | 적용됨 |
-| `px-2` | `px-6` | 무시됨 |
-| `h-20` | `h-14` | 적용됨 |
-| `h-8` | `h-14` | 무시됨 |
-| `text-lg`, `text-xs` | `text-mp-title-medium` | 적용됨 |
-| `bg-red-500` | `bg-(--_mp-accent)` | 적용됨 |
-| `rounded-lg` | `rounded-mp-full` | 무시됨 |
-| `shadow-lg` | `shadow-mp-1` | 무시됨 |
-| `p-8` | `px-6` | 무시됨 |
-| 위의 어느 것이든 `!`를 붙이면 | — | 적용됨 |
-
-들여다볼 만한 것은 처음 네 줄입니다. 같은 컴포넌트, 같은 속성인데 `px-8`은 되고 `px-2`는 안 됩니다. Tailwind가 스케일을 스케일 순서로 내놓기 때문에 더 큰 단계가 더 뒤에 오고, 그래서 *컨트롤을 키우는 쪽은 대체로 되고 줄이는 쪽은 대체로 안 됩니다*. 나머지는 두 테마 키 중 어느 쪽을 Tailwind가 먼저 정렬했는가의 문제입니다. 이 라이브러리의 `--text-mp-*`는 Tailwind 자신의 것보다 앞에 놓이므로 넘긴 `text-*`가 이기고, `--radius-mp-*`와 `--shadow-mp-*`는 뒤에 놓이므로 `rounded-*`와 `shadow-*`는 지지 않고 집니다.
-
-이 중 무엇도 약속이 아닙니다. 어떤 한 버전의 Tailwind가 내놓은 결과이고, 속성 단위가 아니라 짝 단위이며, 양쪽 중 어느 한쪽이 토큰을 추가하면 발밑에서 움직일 수 있습니다. `className`은 컴포넌트가 건드리지 않는 것에 쓰는 도구로 두세요."""
-
-rep('docs/en/guide/getting-started.md', EN_OLD, EN_NEW)
-rep('docs/ko/guide/getting-started.md', KO_OLD, KO_NEW)