Anchor Position Editor

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { Button } from "@/components/ui/button"
5import {
6  Popover,
7  PopoverContent,
8  PopoverTrigger,
9} from "@/components/ui/popover"
10import { cn } from "@/lib/utils"
11import { AnchorExprFields } from "./anchor-expr-fields"
12import {
13  formatAnchor,
14  formatPositionArea,
15  formatPositionTry,
16  keywordsToCell,
17  parseAnchor,
18  parsePositionArea,
19  parsePositionTry,
20} from "./anchor-position-editor.helpers"
21import type {
22  AnchorExpr,
23  AnchorPositionMode,
24  AnchorPositionString,
25  PositionAreaState,
26  TryFallback,
27} from "./anchor-position-editor.types"
28import { AnchorPreview } from "./anchor-preview"
29import { PositionAreaGrid, stateToKeywords } from "./position-area-grid"
30import { TryFallbackChain } from "./try-fallback-chain"
31 
32// Re-export the public sub-components + their prop types so consumers (and the
33// barrel) can import them from `./anchor-position-editor`.
34export type { AnchorExprFieldsProps } from "./anchor-expr-fields"
35export { AnchorExprFields } from "./anchor-expr-fields"
36export type { AnchorPreviewProps } from "./anchor-preview"
37export { AnchorPreview } from "./anchor-preview"
38export type { MiniSelectProps } from "./mini-select"
39export { MiniSelect } from "./mini-select"
40export type { PositionAreaGridProps } from "./position-area-grid"
41export { PositionAreaGrid } from "./position-area-grid"
42export type { TryFallbackChainProps } from "./try-fallback-chain"
43export { TryFallbackChain } from "./try-fallback-chain"
44 
45// ---------------------------------------------------------------------------
46// position-area state derivation (value string ⇄ grid state)
47// ---------------------------------------------------------------------------
48 
49function deriveAreaState(value: string): PositionAreaState {
50  const { keywords } = parsePositionArea(value)
51  const system: PositionAreaState["system"] = keywords.some(
52    (k) => k.includes("block") || k.includes("inline"),
53  )
54    ? "logical"
55    : "physical"
56  const span =
57    keywords.length > 0 &&
58    keywords.every((k) => k.startsWith("span-")) &&
59    !keywords.includes("span-all")
60  // Strip span / logical down to the bare physical keyword for the cell lookup.
61  const bare = keywords.map((k) => {
62    let s = k.startsWith("span-") ? k.slice("span-".length) : k
63    s = s
64      .replace("block-start", "top")
65      .replace("block-end", "bottom")
66      .replace("inline-start", "left")
67      .replace("inline-end", "right")
68    return s
69  })
70// … truncated