oink-ui 1.0.5 → 1.0.7

package/README.md

@@ -62,6 +62,22 @@ export function App() {
 
 `oink-ui/styles.css` contains every design token (`--ok-*`) and every component's styles. To ship only what you use, import `oink-ui/styles/base.css` first and then one entry per component family, e.g. `oink-ui/styles/button.css`, `oink-ui/styles/dialog.css`. The comment at the top of each entry lists the other entries it depends on.
 
+## Control defaults and settings rows
+
+Button, Input (including affixes), Select, Segmented and Menu use regular (400) text, including selected menu options. Selection is shown by the existing fill or checkmark. SearchInput retains its 500 navigation text; Kbd also uses 500. Sizes and variants keep their existing meanings: `size="sm"` remains an explicit compact choice (32px desktop height), while the default `md` remains 40px and `lg` remains 48px. Small ColorSwatches remain 22px; menus and tooltips keep their existing geometry.
+
+Switch defaults to a 44×26px track, a 26×20px thumb and 12px checked travel. `size="lg"` retains the previous 54×32px track (32×26px thumb, 16px travel); `size="sm"` uses 36×22px (20×16px thumb, 10px travel). All sizes keep the 3px inset, stretched thumb when pressed, native checkbox, focus ring and disabled states.
+
+Row labels use 14px/1.3 at 400; descriptions use 12.5px/1.4 at 300. The 56px minimum height, 12px vertical padding, 20px horizontal inset and Group surfaces are unchanged. By default, controls keep their natural width while labels wrap; `controlWidth="fill"`, a fixed width and `stack="auto"` still opt into flexible layouts. Segmented keeps its natural width unless `block` is set.
+
+Accordion headings use the same 56px minimum height, padding and text as Row. A plain Accordion directly inside Group inherits the group's inset, shares dividers with adjacent rows and removes its own content padding so nested rows align. A plain Accordion in an already padded Card still has no horizontal inset. Use `variant="plain"` for these embedded panels to avoid a second Group surface.
+
+The browser regression check covers switch sizes and pressed geometry, regular text, selected options, Group-embedded Accordion alignment and Row's natural / fill / fixed / wrapping layouts in light and dark. It uses an existing Playwright installation and writes evidence outside the repository:
+
+```sh
+node scripts/check-control-defaults.mjs /path/to/playwright/index.mjs /absolute/evidence/directory
+```
+
 ## Theming and locale
 
 `OinkProvider` sets the theme, accent color, motion preference and the language of built-in strings:
@@ -99,13 +115,19 @@ Only Chromium supports `corner-shape` (Chrome, Edge, WebView2). In Safari and in
 
 - It does nothing at all where `corner-shape` is supported, and nothing on the server.
 - It finds the elements to redraw through `--ok-shape`, a non-inherited custom property every stylesheet declaration of `corner-shape` is paired with. Fully round elements keep the native `border-radius`.
-- On those elements the native corners are squared off and then cut along the curve with `clip-path`; the parts native painting can't put on a curve — the hairline, the top highlight, borders and the focus ring — are patched in with a nine-slice SVG `border-image`. Fills, straight edges and hover / press transitions stay native; the corner patches follow transitions frame by frame. Clipped content (images, scrolling areas) is cut on the curve too.
-- It follows mounts, unmounts, resizes, theme changes, hover, focus and running transitions. On a page with 300 rounded elements (about 1,900 elements in all) in WKWebView it costs about 13 ms once at start-up plus 8 ms for the first paint, 6–8 ms extra on a theme switch, and 1–2 ms of script per frame while 50 rounded elements resize or 10 animate their ring colour.
+- On those elements the native corners are squared off and then cut along the curve with `clip-path`; the parts native painting can't put on a curve — the hairline, the top highlight, borders and the focus ring — are patched in with a nine-slice `border-image`. WebKit uses a persistent named CSS canvas, drawn synchronously from the same SVG paths and the native transition's computed colours. Colour changes neither replace an image resource nor start a separate image-animation clock. Other fallback engines retain SVG images. Fills, straight edges and hover / press transitions stay native. Clipped content (images, scrolling areas) is cut on the curve too.
+- Dashed, dotted, double and other non-solid outlines (including `auto`) keep native rendering for the whole element or pseudo-element; a same-size host behind such a pseudo-element also stays native. This preserves the browser's dash spacing and avoids duplicate solid arcs or clipped dashes. These parts use ordinary round corners in fallback engines, even with `--ok-shape: var(--ok-corner)`, and automatically return to superellipse rendering when their outline becomes solid or disappears. A transparent non-solid outline follows the same rule.
+- Interaction changes are committed in a microtask before painting; attribute changes from application event handlers are also flushed by the mutation observer before painting. Transition and animation events update the patch synchronously. WebKit redraws the same canvas during colour and geometry transitions; other fallback engines prepaint fixed colour endpoints. Corners with either radius axis at zero keep native shadow geometry, without the curved patches' 1px antialiasing extension.
+- It follows mounts, unmounts, resizes, pixel-density changes, theme changes, hover, focus and running transitions. The canvas backing follows device pixel ratio and is released when the part is removed. Native `corner-shape` engines do not create canvases or observers.
+
+Applications upgrading from 1.0.5 can remove the forced `--ok-shape: round` workaround on dashed outlines and use the usual paired shape declarations. Selection rings can use `box-shadow` again, including stacked gap/accent rings and tiles with square contact corners; a separate SVG selection ring is not required.
 
 Without `OinkProvider`, call `installCornerFallback()` once on the client (it returns a function that removes it again; calls are reference-counted). `<OinkProvider cornerFallback={false}>` turns it off. Your own CSS gets the same treatment when it pairs the declarations: `corner-shape: var(--ok-corner); --ok-shape: var(--ok-corner);`.
 
 Code that reads the tokens to draw matching shapes (`getComputedStyle(document.documentElement).getPropertyValue('--ok-corner')`) sees `superellipse(1.75)` and `--ok-rk: 1.45` wherever the corners are superellipses: natively in Chromium, and in other engines once the fallback is running (it marks `<html data-ok-corner-fallback>`). Before the script runs, or with the fallback turned off, those engines draw plain round corners and the tokens say `round` and `1`. `cornerShapePath()` returns the SVG path of a box with these corners, using the same Bézier construction as Chromium.
 
+Text controls cancel an IME-confirmation Enter before caller key handlers or implicit form submission. Both `isComposing` and WebKit's trailing `keyCode === 229` are recognised, including when `compositionend` precedes the keydown. A subsequent ordinary Enter keeps its usual behaviour. This boundary also covers SearchInput, date/colour text editors, NumberInput, Combobox and PIN cells; Form protects raw inputs, and explicit Enter actions ignore the same confirmation key.
+
 ## Development
 
 ```bash

package/dist/core/corner.d.ts

@@ -49,7 +49,7 @@ export declare function rectPath(b: Box, reverse?: boolean): string;
  * 关键字 round / squircle / square / bevel / scoop / notch 和 superellipse(K | infinity | -infinity)。全是 round 返回 null
  */
 export declare function parseCornerShape(value: string): CornerKs | null;
-/** 一层阴影（来自计算后的 box-shadow）。模糊忽略不计：设计里没有阴影，只有零模糊的描边和高光 */
+/** 一层阴影（来自计算后的 box-shadow）。零模糊用于描边和高光；外阴影的 blur 保留高斯模糊 */
 export interface ShadowLayer {
     inset: boolean;
     dx: number;
@@ -62,7 +62,10 @@ export interface OutlineLayer {
     offset: number;
     width: number;
     color: string;
+    style?: string;
 }
+/** 非实线轮廓交还原生绘制：补丁无法与浏览器的虚线相位、双线间距一致。省略 style 的旧调用按 solid 处理。 */
+export declare function nativeOutline(outline: Pick<OutlineLayer, 'style' | 'width'> | null): boolean;
 /** 一个元素（或伪元素）在回退里需要知道的全部：尺寸、半径（已缩放）、曲率、边框、阴影、outline */
 export interface CornerDecor {
     w: number;

package/dist/core/cornerCanvas.d.ts

@@ -0,0 +1,18 @@
+import type { CornerPaint } from './corner';
+export declare function cornerCanvasSupported(doc: Document): boolean;
+/**
+ * WebKit 的命名 CSS canvas 是持久的图像源：颜色变化只在同一任务里重画像素，
+ * 不替换 border-image，也不经过 SVG 图像的异步解码。直接执行 cornerPaint 生成
+ * 的路径、裁切和图层，几何仍然只有一个来源；这里不接受用户提供的 SVG。
+ * SVG 图像里的 currentColor 不能继承 HTML，端点淡化仍会更换资源；这两种写法
+ * 无法保证曲线与原生直边同帧。已实测 macOS 14.7.8 / 26.6.2 的 WKWebView；
+ * 其它内核继续使用原来的 SVG 路径，支持原生 corner-shape 时不启用回退。
+ */
+export declare class CornerCanvas {
+    private name;
+    private doc;
+    private context;
+    constructor(doc: Document);
+    paint(spec: CornerPaint | null): string;
+    destroy(): void;
+}

package/dist/core/ime.d.ts

@@ -0,0 +1,7 @@
+import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
+type KeyEvent = KeyboardEvent | ReactKeyboardEvent;
+/** WebKit 先结束组字，再派发 isComposing=false、keyCode=229 的确认键。 */
+export declare function isImeComposing(event: KeyEvent): boolean;
+/** 确认组字的回车不能触发组件快捷键、祖先处理器或表单的原生隐式提交。 */
+export declare function guardImeEnter(event: KeyEvent): boolean;
+export {};

package/dist/inputs/Switch.d.ts

@@ -1,5 +1,7 @@
 import type { CSSProperties, InputHTMLAttributes } from 'react';
 export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'checked' | 'defaultChecked' | 'onChange'> {
+    /** 轨道尺寸：sm 36×22、md（默认）44×26、lg 54×32。 */
+    size?: 'sm' | 'md' | 'lg';
     checked?: boolean;
     defaultChecked?: boolean;
     /** 第一个参数是新的开关状态 */