1a:I[11068,["/_next/static/chunks/2-h0q6_5pvc7h.js","/_next/static/chunks/237zjpbb3cffm.js","/_next/static/chunks/1g-4npe8y7xon.js","/_next/static/chunks/2fy5huhwd7--z.js","/_next/static/chunks/32faxhqdzjmjy.js","/_next/static/chunks/2xpk_p7j95602.js"],"default"] 1b:I[58663,["/_next/static/chunks/2-h0q6_5pvc7h.js","/_next/static/chunks/237zjpbb3cffm.js","/_next/static/chunks/1g-4npe8y7xon.js","/_next/static/chunks/2fy5huhwd7--z.js","/_next/static/chunks/32faxhqdzjmjy.js","/_next/static/chunks/2xpk_p7j95602.js"],"default"] 1c:I[4927,["/_next/static/chunks/2-h0q6_5pvc7h.js","/_next/static/chunks/237zjpbb3cffm.js","/_next/static/chunks/1g-4npe8y7xon.js","/_next/static/chunks/2fy5huhwd7--z.js","/_next/static/chunks/32faxhqdzjmjy.js","/_next/static/chunks/2xpk_p7j95602.js"],"default"] 22:I[62089,["/_next/static/chunks/2-h0q6_5pvc7h.js","/_next/static/chunks/237zjpbb3cffm.js","/_next/static/chunks/1g-4npe8y7xon.js","/_next/static/chunks/2fy5huhwd7--z.js","/_next/static/chunks/32faxhqdzjmjy.js","/_next/static/chunks/2xpk_p7j95602.js"],"default"] 1d:T1b3b,/** * @module taffy-preview * @description Preview visualizer for Taffy Layout structures. * Intercepts Taffy tree operations to collect layout data and renders * a visual representation of the nodes. */ const colorPalette = [ "#60a5fa", "#34d399", "#fbbf24", "#f472b6", "#c084fc", "#f97316", ]; interface PreviewLayout { width: number; height: number; x: number; y: number; } interface PreviewTree { getLayout(node: unknown): PreviewLayout; __previewChildren: Map; } function getChildrenMap(tree: PreviewTree) { if (!tree.__previewChildren) tree.__previewChildren = new Map(); return tree.__previewChildren; } function wrapTree(mod: { TaffyTree: { prototype: Record }; __previewWrapped?: boolean; }) { if (!mod?.TaffyTree || mod.__previewWrapped) return; const proto = mod.TaffyTree.prototype as { newLeaf: unknown; newWithChildren: unknown; addChild: unknown; }; const originalNewLeaf = proto.newLeaf as (style: unknown) => unknown; const originalNewWithChildren = proto.newWithChildren as ( style: unknown, children: unknown[], ) => unknown; const originalAddChild = proto.addChild as ( parent: unknown, child: unknown, ) => unknown; proto.newLeaf = function (style: unknown) { const node = originalNewLeaf.call(this, style); getChildrenMap(this as unknown as PreviewTree).set(node, []); return node; }; proto.newWithChildren = function (style: unknown, children: unknown[] = []) { const node = originalNewWithChildren.call(this, style, children); getChildrenMap(this as unknown as PreviewTree).set(node, children); return node; }; if (typeof originalAddChild === "function") { proto.addChild = function (parent: unknown, child: unknown) { const result = originalAddChild.call(this, parent, child); const map = getChildrenMap(this as unknown as PreviewTree); const list = map.get(parent) || []; if (!list.includes(child)) list.push(child); map.set(parent, list); if (!map.has(child)) map.set(child, []); return result; }; } mod.__previewWrapped = true; } function collectNodesWithPositions(tree: PreviewTree, root: unknown) { const map = getChildrenMap(tree); const visited = new Set(); const result: { node: unknown; layout: PreviewLayout; x: number; y: number; isLeaf: boolean; }[] = []; const walk = (node: unknown, offsetX: number, offsetY: number) => { if (!node || visited.has(node)) return; visited.add(node); const layout = tree.getLayout(node); const x = (layout?.x ?? 0) + offsetX; const y = (layout?.y ?? 0) + offsetY; const children = map.get(node) || []; result.push({ node, layout, x, y, isLeaf: children.length === 0 }); children.forEach((child: unknown) => walk(child, x, y)); }; walk(root, 0, 0); return result; } /** * Visualizes a Taffy Layout tree. * * Renders a set of nested boxes representing the layout nodes, * displaying their dimensions and positions. * * @param props.tree - The preview-wrapped Taffy tree interface. * @param props.root - The root node of the layout to visualize. * @returns A React component rendering the layout visualization. */ export function TaffyTreePreview({ tree, root, }: { tree: PreviewTree; root: unknown; }) { if (!tree || !root || typeof tree.getLayout !== "function") { return

No layout data.

; } const nodes = collectNodesWithPositions(tree, root); const rootLayout = tree.getLayout(root); const width = rootLayout?.width ?? 0; const height = rootLayout?.height ?? 0; return (

{nodes.map(({ layout, x, y, isLeaf }, index) => { const color = index === 0 ? "var(--taffy-root-bg, rgba(255, 255, 255, 0.45))" : colorPalette[(index - 1) % colorPalette.length]; return (

{isLeaf && layout.width > 30 && layout.height > 15 ? ( {(layout.width % 1 === 0 ? layout.width : layout.width.toFixed(1)) + "×" + (layout.height % 1 === 0 ? layout.height : layout.height.toFixed(1))} ) : ( "" )}

); })}

); } /** * Registers the preview mechanism by wrapping the Taffy module. * * @param mod - The Taffy WASM module to instrument. */ export function registerPreview(mod: { TaffyTree: unknown; TaffyTreePreview?: unknown; }) { wrapTree( mod as { TaffyTree: { prototype: Record }; __previewWrapped?: boolean; }, ); if (mod) { mod.TaffyTreePreview = TaffyTreePreview; } if (typeof globalThis !== "undefined") { (globalThis as unknown as { TaffyTreePreview: unknown }).TaffyTreePreview = TaffyTreePreview; } } 1e:T157c,/** * @module sandbox-setup * @description Initialization script for the Sandpack environment. * Sets up the Taffy layout engine and polyfills Web Crypto API if needed. */ import { registerPreview } from "./taffy-preview"; type DigestAlgorithm = "SHA-1" | "SHA-256" | "SHA-384" | "SHA-512"; /** * Converts a BufferSource to a Uint8Array. * * @param data - The buffer source to convert. * @returns A Uint8Array view of the data. */ function toUint8Array(data: BufferSource) { if (data instanceof ArrayBuffer) return new Uint8Array(data); if (ArrayBuffer.isView(data)) { return new Uint8Array(data.buffer, data.byteOffset, data.byteLength); } return new Uint8Array(); } const fallbackGetRandomValues = (array: Uint8Array) => { for (let i = 0; i < array.length; i += 1) { array[i] = Math.floor(Math.random() * 256); } return array; }; const fallbackSubtle = { digest: async (algorithm: AlgorithmIdentifier, data: BufferSource) => { const name = typeof algorithm === "string" ? algorithm : (algorithm as { name?: string })?.name || ""; const normalized = name.toUpperCase() as DigestAlgorithm; const bytes = toUint8Array(data); const { sha1 } = await import("@noble/hashes/legacy.js"); const { sha256, sha384, sha512 } = await import("@noble/hashes/sha2.js"); let hash: Uint8Array; switch (normalized) { case "SHA-1": hash = sha1(bytes); break; case "SHA-384": hash = sha384(bytes); break; case "SHA-512": hash = sha512(bytes); break; case "SHA-256": default: hash = sha256(bytes); break; } return hash.buffer.slice( hash.byteOffset, hash.byteOffset + hash.byteLength, ); }, }; /** * Polyfills the Web Crypto API's digest and getRandomValues functions. * required for some dependencies within the sandbox. */ function applyCryptoPolyfill() { const existing = globalThis.crypto as Crypto | undefined; if (!existing) { try { Object.defineProperty(globalThis, "crypto", { value: { subtle: fallbackSubtle, getRandomValues: fallbackGetRandomValues, }, configurable: true, }); } catch { // Ignore if read-only } return; } if (!existing.subtle || !(existing.subtle as SubtleCrypto).digest) { try { Object.defineProperty(existing, "subtle", { value: fallbackSubtle, configurable: true, }); } catch { try { (existing as unknown as { subtle: SubtleCrypto }).subtle = fallbackSubtle as SubtleCrypto; } catch { // Ignore if read-only } } } if (!existing.getRandomValues) { try { Object.defineProperty(existing, "getRandomValues", { value: fallbackGetRandomValues, configurable: true, }); } catch { try { ( existing as unknown as { getRandomValues: typeof fallbackGetRandomValues; } ).getRandomValues = fallbackGetRandomValues; } catch { // Ignore if read-only } } } } applyCryptoPolyfill(); /** * Ensures a robust Web Crypto implementation is available. * Attempts to borrow from Node's crypto if global crypto is insufficient. */ async function ensureWebCrypto() { const existing = globalThis.crypto as Crypto | undefined; if (existing?.subtle?.digest) return; try { const nodeCrypto = await import("crypto"); if (nodeCrypto?.webcrypto?.subtle) { const nodeSubtle = nodeCrypto.webcrypto.subtle as SubtleCrypto; const nodeGetRandomValues = nodeCrypto.webcrypto.getRandomValues?.bind( nodeCrypto.webcrypto, ); const current = globalThis.crypto as Crypto | undefined; if ( current && (!current.subtle || !(current.subtle as SubtleCrypto).digest) ) { try { Object.defineProperty(current, "subtle", { value: nodeSubtle, configurable: true, }); } catch { try { (current as unknown as { subtle: SubtleCrypto }).subtle = nodeSubtle; } catch { // Ignore if read-only } } } if (current && !current.getRandomValues && nodeGetRandomValues) { try { Object.defineProperty(current, "getRandomValues", { value: nodeGetRandomValues, configurable: true, }); } catch { try { ( current as unknown as { getRandomValues: typeof nodeGetRandomValues; } ).getRandomValues = nodeGetRandomValues; } catch { // Ignore if read-only } } } } } catch { // Ignore and keep polyfill } } /** * Loads the Taffy Layout WASM module and registers the preview. * * @returns The loaded Taffy module. */ async function loadTaffy() { try { await ensureWebCrypto(); const wasmUrl = "https://unpkg.com/taffy-layout@latest/pkg/taffy_wasm_bg.wasm"; const mod = await import("taffy-layout/wasm"); if (mod && typeof mod.default === "function") { await mod.default(wasmUrl); } Object.assign(globalThis, mod); registerPreview(mod); return mod; } catch (error) { console.error("Failed to load taffy-layout wasm", error); throw error; } } export const ready = loadTaffy(); 17:["$","main",null,{"className":"min-w-0","children":[["$","$L1a",null,{"items":"$9:props:children:2:props:children:props:children:0:props:children:props:children:props:items","ui":"$9:props:children:1:props:ui"}],["$","$L1b",null,{"motionKey":"content-api/type-aliases/StylePropertyArrayValues","children":["$","div",null,{"className":"rounded-3xl border border-slate-200 bg-white p-6 shadow-sm sm:p-10 dark:border-slate-800 dark:bg-slate-900","children":[["$","div",null,{"className":"mb-6 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-200","children":"このページの翻訳はまだありません。英語版を表示しています。"}],["$","div",null,{"className":"doc-content","children":[["$","h1",null,{"id":"stylepropertyarrayvalueskeys","children":["$","a",null,{"href":"#stylepropertyarrayvalueskeys","className":"anchor-link","children":"StylePropertyArrayValues"}]}],"\n",["$","pre",null,{"className":"overflow-x-auto language-ts language-ts","suppressHydrationWarning":true,"children":["$","$L1c",null,{"className":"language-ts code-highlight","data-language":"ts","children":[["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"type"}]," ",["$","span",null,{"className":"token class-name","children":["StylePropertyArrayValues",["$","span",null,{"className":"token operator","children":"<"}],"Keys",["$","span",null,{"className":"token operator","children":">"}]]}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token constant","children":"K"}]," ",["$","span",null,{"className":"token keyword","children":"in"}]," ",["$","span",null,{"className":"token keyword","children":"keyof"}]," Keys",["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token operator","children":":"}]," Keys",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token constant","children":"K"}],["$","span",null,{"className":"token punctuation","children":"]"}]," ",["$","span",null,{"className":"token keyword","children":"extends"}]," ",["$","span",null,{"className":"token class-name","children":"StyleProperty"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token operator","children":"?"}]," StylePropertyValues",["$","span",null,{"className":"token punctuation","children":"["}],"Keys",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token constant","children":"K"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":"]"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token builtin","children":"unknown"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n"]}]],"templates":{"previewHelpers":"$1d","setup":"$1e","reactIndex":"/**\n * @module features/code/lib/sandpack-assets/react-index\n * @description Entry point for the React Sandpack environment.\n * Initializes the React root and renders the user's App component.\n */\n\nimport { ready } from \"./sandbox-setup\";\nimport { createRoot } from \"react-dom/client\";\n// @ts-expect-error -- Sandpack issue\nimport App from \"./App\";\n\nready.then(() => {\n // Mount the application once the sandbox environment is ready\n const root = document.getElementById(\"root\");\n if (root) createRoot(root).render();\n});\n","tsIndex":"/**\n * @module features/code/lib/sandpack-assets/ts-index\n * @description Entry point for the Vanilla TypeScript Sandpack environment.\n * Waits for the environment to be ready and then executes the user's code.\n */\n\nimport { ready } from \"./sandbox-setup\";\nready.then(() => {\n // {{CODE}} - This placeholder is replaced at runtime with the user's TypeScript code.\n});\n"},"inline":false}]}],"\n","$L1f","\n","$L20","\n","$L21"]}]]}]}]]}] 18:["$","aside",null,{"className":"doc-layout__toc hidden xl:block","children":["$","div",null,{"className":"doc-panel sticky top-24 max-h-[calc(100vh-6rem)] overflow-y-auto","children":["$","$L1b",null,{"motionKey":"toc-api/type-aliases/StylePropertyArrayValues","children":["$","$L22",null,{"items":[{"id":"type-parameters","text":"Type Parameters","level":2}],"title":"このページ"}]}]}]}] 19:["$","footer",null,{"className":"border-t border-slate-200 bg-white/90 dark:border-slate-800 dark:bg-slate-900/90","children":["$","div",null,{"className":"mx-auto flex max-w-7xl items-center justify-center px-4 py-8 text-sm text-slate-500 sm:px-6 lg:px-8 dark:text-slate-400","children":["$","p",null,{"children":["© ",2026," ByteLand Technology Limited"]}]}]}]

StylePropertyArrayValues<Keys>

Type Parameters