oink-ui 1.0.4 → 1.0.6

package/README.md

@@ -100,8 +100,12 @@ 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.
+- 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. Colour-only transitions prepaint fixed endpoints and animate their opacity without replacing SVG resources each frame. Geometry transitions update before each paint. Corners with either radius axis at zero keep native shadow geometry, without the curved patches' 1px antialiasing extension.
 - 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.
 
+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.

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;
@@ -118,7 +121,7 @@ export interface CornerPaint {
 }
 /** 补丁缓存键里和尺寸有关的部分：能拉伸的方向不看尺寸 */
 export declare function paintSizeKey(d: CornerDecor): string;
-export declare function cornerPaint(d: CornerDecor): CornerPaint | null;
+export declare function cornerPaint(d: CornerDecor, layout?: CornerDecor): CornerPaint | null;
 /** 把补丁写成 border-image 的值 */
 export declare function borderImageValue(p: CornerPaint): string;
 export {};