External/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-10-27 09:51:12 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
6132da1d79bee978fa9423e3b89bbca34063ea37
open-design/clipper/i18n.js
T
Tom HuangGitHubCursorxne998808-aiPerishCodeopen-design-bot[bot] <282769551+open-design-bot[bot]@users.noreply.github.com>lefarcenSiri-Ray
 29b138f7a3 feat(brands): turn any brand into a reusable design system (#4691) 
* Implement brand management routes and CLI support

- Added `brand-routes.ts` to handle HTTP endpoints for brand operations: listing, extracting, retrieving details, deleting, and serving logos.
- Introduced `brands-cli-help.ts` for CLI commands related to brand management, including usage instructions for listing, creating, retrieving, and deleting brands.
- Updated `cli.ts` to integrate brand commands into the existing CLI structure, allowing headless management of brands via the command line.
- Created supporting files for brand metadata handling, including `design-md.ts` for rendering brand information in markdown format and `index.ts` for the brand engine API.
- Implemented `prefetch.ts` to fetch and process brand material from specified URLs, ensuring a streamlined extraction process.
- Enhanced server setup in `server.ts` to register brand routes and manage brand-related data effectively.

This commit establishes a comprehensive framework for managing brands within the application, facilitating both HTTP and CLI interactions.

* Enhance memory management and onboarding experience

- Introduced canonical profile labels to ensure consistent handling of user input in profile forms, preventing duplicate entries.
- Updated the `parseProfileBody` and `captureProfileFromForm` functions to utilize the new canonical label matching.
- Added a memory callout section in the onboarding view to highlight the benefits of memory usage, including personalized responses and reduced setup questions.
- Implemented new UI elements in the onboarding view to improve user engagement with memory features.
- Expanded i18n support for new onboarding messages related to memory benefits across multiple languages.

* Refactor onboarding flow and enhance design system integration

- Updated the onboarding process to include a new brand extraction step, replacing the previous newsletter step.
- Adjusted the tracking logic to reflect the new onboarding steps, ensuring accurate analytics for user progress.
- Improved the UI for the onboarding view, including new input fields for email collection during the brand extraction phase.
- Refined the EntryShell component to remove outdated comments and clarify the onboarding renderer's purpose.
- Enhanced CSS styles for the onboarding steps to improve layout and user experience.
- Updated internationalization strings across multiple languages to reflect changes in the onboarding flow and brand extraction messaging.

* Add brand management features and enhance font handling

- Introduced new modules for managing brand assets, including `chrome.ts` for headless Chrome operations and `fonts.ts` for self-hosting web fonts.
- Implemented `prefetch.ts` to streamline the brand material extraction process, allowing for efficient harvesting of colors, fonts, and logos.
- Enhanced the brand system with new schema definitions in `schema.ts` to support brand color and font management.
- Developed the `engine` module to integrate brand building and rendering processes, including token derivation and artifact generation.
- Improved the overall structure and organization of brand-related files for better maintainability and scalability.

* Enhance brand extraction and project management features

- Updated `brand-routes.ts` to include new dependencies for project management, allowing for the registration of brand-related projects.
- Modified the `extractBrand` function to support project ID and system files, improving the brand extraction process.
- Enhanced the CLI commands in `cli.ts` to handle project IDs during brand creation, enabling better tracking of brand projects.
- Updated the server setup in `server.ts` to register new project-related routes.
- Improved the UI components to display project information associated with brands, including buttons for opening projects in the `BrandDetailView` and `BrandsTab`.
- Added new metadata fields in the contracts to support project tracking and management for brands.

This commit establishes a more robust framework for managing brand projects, enhancing both backend and frontend functionalities.

* Enhance onboarding profile management and memory persistence

- Added new canonical profile labels for 'Organization size', 'Use cases', and 'Discovery source' to improve user input consistency.
- Introduced `OnboardingProfileState` type to manage onboarding profile data more effectively.
- Implemented functions to build and persist the onboarding profile body to memory, ensuring user selections are saved accurately.
- Updated the `OnboardingView` component to handle profile persistence during navigation and submission steps.
- Enhanced tests to verify that user selections are correctly persisted to the memory profile.

This commit improves the onboarding experience by ensuring that user inputs are consistently captured and stored, enhancing overall user engagement with the application.

* Reflow brand extraction into an agent-driven, live flow

Replace the deterministic SSE prefetch/preview/system pipeline with an
agent-driven extraction: POST /api/brands now reserves the brand and stands
up a backing project with the target site open in an in-app browser tab plus
a seeded prompt, so the agent measures, synthesizes brand.json incrementally,
and the user can clear anti-bot walls by hand. New /preview and /finalize
routes let the agent render the kit page live and register the resulting
user:<id> design system, so extracted brand facts persist as a structured,
reusable brand kit instead of a one-shot deterministic guess.

Adds the brand-extract skill (SKILL.md + brand-kit.html template), kit-render
engine, brand-extraction-engine tests, brand project covers in the Designs
tab, onboarding extract handoff, and the matching od brand extract/preview/
finalize CLI subcommands and contract updates.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Sediment finalized brands into structured memory

Reflow a finalized brand into the memory store (brandToMemoryEntries +
reflowBrandToMemory) so future chats can ground vague requests in the
brand's palette, type, voice and rules. finalizeBrand now wires through
the runtime dataDir and best-effort persists the brand, MemoryChangeEvent
gains a 'brand' source, and the brand kit render hardens its inline JSON
escaping. Adds brand.previewEmpty / brand.viewDetails across all locales.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Implement logo fallback and imagery support in brand extraction

- Introduced a deterministic logo fallback mechanism to ensure that brand extraction processes can retrieve and save site logos, even when the agent fails to do so.
- Enhanced the `startBrandExtraction` and `finalizeBrand` functions to utilize the new logo fallback, allowing for better handling of logo assets.
- Added support for imagery samples in brand validation, enabling the inclusion of representative images in the brand kit.
- Updated the brand kit rendering to include self-hosted fonts and imagery, improving the overall presentation of brand assets.

This commit strengthens the brand extraction workflow by ensuring that logos and imagery are reliably captured and displayed, enhancing the user experience in brand management.

* Enhance memory management with rule proposal and verification features

- Introduced new functionality for distilling annotations into rule proposals, allowing users to suggest rules based on in-canvas annotations through the `od memory rule suggest` command.
- Implemented a verification system that programmatically enforces compliance with active rules during artifact generation, ensuring that all active rules are covered in the self-verify scorecard.
- Added endpoints for managing verification outcomes, including listing, removing, and clearing verification records, enhancing the transparency of the verification process.
- Updated the memory management system to support the retrieval of active rule entries, ensuring that only linked rules are considered during verification.
- Enhanced tests for both rule proposal generation and verification processes to ensure reliability and correctness.

This commit strengthens the memory management capabilities by integrating rule proposals and verification, improving the overall user experience in managing design rules and ensuring compliance.

* Distill review annotations into memory and enforce self-verify scorecard

Add distillAnnotationsToMemory to mine inline preview comments/highlights/
marks into durable feedback + rule memory via a dedicated distiller prompt,
threaded through the existing extract pipeline with an 'annotation' change
source. Tighten the self-verify prompt (daemon + contracts) to state the
daemon programmatically checks the scorecard, so a missing or uncovered
scorecard on an artifact turn is an enforcement failure. Cover the rule
suggest and verification-history routes with tests.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Apply brand design system through web config on "Use in new chat"

Thread onApplyDesignSystem from the entry shell into BrandsTab so the brand's
registered design system is applied via the web config channel instead of a
bare daemon PATCH that left the Home composer stale. Add a transient
home-intent latch + event so the Brands tab can request the Prototype chip on
the already-mounted HomeView, which consumes it once the plugin catalog loads.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Wire annotation distillation into background memory extraction

Add a background distill pass that mines inline review annotations
(comments / highlights / drawn marks) from a turn into durable memory
alongside the general LLM extraction, surface an `annotation` memory
toast source in the web UI, and cover the flow with a unit test.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix brand design system not applying to composer on "Use in new chat"

Selecting a brand's "Use in new chat" applies the brand's design system as
the default and fires the Prototype chip intent in the same synchronous click
handler. HomeView consumed that intent inside the event listener, so `pickChip`
ran before React committed the config change and seeded the composer's
design-system field from the stale (empty) default — the composer showed
"No design system" instead of the brand until a reload.

Split the intent handling: the listener now only bumps a tick, and a separate
effect consumes the chip after the re-render lands, so the seeded design system
reflects the freshly-applied brand. Add the previously-untracked home-intent
latch test coverage.

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(web): rework Brands into Brand Kit and add Home create entry

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(brands): harvest real cover/hero images for the Images module

The brand kit's Images gallery only populated when the extraction agent
remembered to save imagery — so a forgetful or bot-blocked agent (and the
pre-imagery "Open Design" brand) left it empty. Add a deterministic,
server-side imagery fallback (imagery-fallback.ts), mirroring the logo
fallback: it parses og:image/twitter:image, large <img> (highest-res
srcset/<picture>), <link rel=preload as=image>, and CSS background-image
hero blocks, fetches candidates with browser-shaped headers, decodes
PNG/GIF/JPEG/WebP dimensions to keep only big representative images
(dropping icons/sprites/logos/tracking pixels), dedupes by content hash,
and saves up to 8 of the largest into imagery/ with labeled samples.

finalizeBrand runs it as a timeout-bounded, failure-tolerant safety net
(injectable so tests stay offline) when the agent captured too few
samples, first adopting any on-disk images. The extraction prompt and
brand-extract SKILL now explicitly direct the agent to harvest the site's
large/cover/hero images, filtered by rendered size.

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(qa): implement deck layout validation and safety checks

Add a new QA module for validating the layout of generated brand decks to ensure robustness against clipping and truncation issues. The `analyseDeckLayout` function checks for critical layout invariants, including the presence of `.slide` sections, correct container types, and necessary runtime layers. Introduce `assertDeckLayoutSafe` to enforce these checks during brand system rebuilds, preventing the deployment of decks that fail validation. Additionally, create comprehensive tests to verify the functionality of the new layout validation features.

* fix(brands): apply deck shrink-to-fit synchronously so slides never clip

The no-clip runtime scheduled its fit pass through requestAnimationFrame,
whose callbacks are throttled while the deck is offscreen or occluded. A
slide could therefore stay unscaled — and clip its content — until first
paint. Fit synchronously on resize/load/fonts-ready with a trailing
setTimeout settle pass for late reflow, removing the rAF dependency.

Verified at the previously-broken 1024x620 viewport: container-type:size,
zero truncations, runtime auto-applies scale (Problem 0.71, ASK 0.87,
Product 0.97, Competition 0.97) and frame clip count drops to 0.

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(web): let New Brand modal embed scrollable brand reference picker

Add a fillHeight mode to BrandReferencePicker so the heading, quick-pick
row and controls stay pinned while only the gallery scrolls inside a
bounded-height parent. Wire it into NewBrandModal with a stable, spacious
dialog and refresh the related newBrand/brandPicker copy across all 18
locales.

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(brands): enhance brand extraction with deterministic seed harvesting

Introduce a new `seed-fallback` module to provide a server-side deterministic palette and typography seed during brand extraction. This ensures that the brand kit's initial display includes a harvested logo, an approximate color palette, and font families, improving the user experience by reducing the all-skeleton appearance during the first paint. Update the `startBrandExtraction` function to utilize this new module, allowing for a more seamless and visually appealing brand extraction process.

Additionally, enhance the `BrandReferencePicker` component to reflect loading states and errors during brand extraction, ensuring users receive immediate feedback on their actions. Update related tests to verify the idempotency of the `finalizeBrand` function, ensuring that re-finalizing a brand correctly reuses the existing design system without duplication.

* feat(brand-extract): enhance BrandReferencePicker and localization updates

Updated the BrandReferencePicker component to reflect loading states and errors during brand extraction, improving user feedback. Added a new localization key for the brand extraction process and updated existing translations in English, Simplified Chinese, and Traditional Chinese to enhance clarity and user experience. Additionally, introduced new styles for better interaction with brand assets in the brand kit template.

* feat(brands): wire in-page lightbox/masonry/asset preview + refine seed

Brand-kit preview improvements for the live extraction kit:
- brand-kit.html: add in-page overlay system (sandboxed iframe has no
  top-nav) — clickable image lightbox with prev/next, a "view all"
  masonry modal, and a full-page asset preview modal that loads
  system/artifacts/<kind>.html in an iframe. Defer auto-reload while an
  overlay is open so it never yanks the modal out mid-interaction.
- seed-fallback.ts: prefer vivid mid-luminance hues for the seeded
  accent/accent-secondary, and drop icon/symbol faces (Remix Icon etc.)
  from the typography seed so specimens never render glyph soup.

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(brands): wire in-page lightbox/masonry/asset preview + refine seed

Brand-kit preview improvements for the live extraction kit:
- brand-kit.html: add in-page overlay system (sandboxed iframe has no
  top-nav) — clickable image lightbox with prev/next, a "view all"
  masonry modal, and a full-page asset preview modal that loads
  system/artifacts/<kind>.html in an iframe. Defer auto-reload while an
  overlay is open so it never yanks the modal out mid-interaction.
- seed-fallback.ts: prefer vivid mid-luminance hues for the seeded
  accent/accent-secondary, and drop icon/symbol faces (Remix Icon etc.)
  from the typography seed so specimens never render glyph soup.

Co-authored-by: Cursor <cursoragent@cursor.com>

* i18n(web): add brandPicker.opening across remaining locales + picker test

Completes the brand-reference picker i18n key that was committed only for
en/zh-CN/zh-TW, so every locale satisfies the typed Dict, and lands the
BrandReferencePicker extraction-feedback test left untracked by the
concurrent worker.

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(EntryShell): enhance AMR cloud card visibility post-detection

Updated the EntryShell component to ensure the AMR cloud card remains visible after detection settles, even when the AMR runtime is unavailable. This change prevents the card from disappearing and allows it to degrade gracefully to fallback content and sign-in flow. Additionally, added tests to verify the new behavior, ensuring a better user experience during onboarding.

* feat(library): OD Library asset registry + OD Clipper extension

Add a global, cross-project asset registry (OD Library) and a Chrome MV3
capture extension (OD Clipper), wiring the full HTTP + CLI + Web UI three-track
loop per specs/od-clipper.md.

- contracts: LibraryAsset/Source/Kind, ingest, search, pairing, task DTOs
- daemon: 6 additive SQLite tables, content-addressed owned storage, the
  idempotent registerLibraryAsset hook (hash dedup + append-source),
  programmatic enrichment (mime/size/image dims/domain/tags), pairing tokens
  with a persisted extension-origin allowlist, /api/library/* routes, and
  /api/tools/library/{search,apply} for in-task agent reuse
- cli: `od library list|get|rm|search|import|pair`
- web: Library tab (grid, source badges, filters, search, live SSE updates,
  extension pairing affordance)
- clipper/: standalone MV3 extension (background SW, content toolbar, popup)
- skills/library-curator: utility skill for agent-driven asset reuse

Origin middleware now honors paired chrome-extension:// origins (seeded from
SQLite on boot) and exempts the pairing-confirm handshake. Enrichment AI stages
(caption/OCR/embedding) are recorded as skipped pending a configured model.

* feat(brands): programmatic-first design system extraction + rename

Make brand extraction two-phase so a usable design system is ready the
moment the user enters a URL — the instant "aha" — instead of waiting on
the AI agent:

1. PROGRAMMATIC-FIRST (synchronous): startBrandExtraction now harvests the
   site deterministically (logo, palette, typography, one-line description,
   cover imagery, source URL) via prefetchBrand, synthesizes a valid design
   system with brandFromMaterial (no LLM), and finalizes + registers it
   before returning. finalizeBrand is refactored into a reusable
   finalizeBrandCore shared by both the programmatic path and the agent path.
2. ASYNC AI ENRICHMENT: the seeded agent prompt is reframed to enrich the
   already-usable design system and re-finalize in place (same user:<id>),
   updating every artifact/template.

Bounded + best-effort: a blocked/unreachable origin skips phase 1 and stays
`extracting` for the agent to drive. Gated on userDesignSystemsRoot so the
legacy agent-only path stays intact for tests.

Also rename the user-facing "Brand Kit" surface to "Design System" across
en + zh-CN strings, project names, and the enrichment prompt.

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(library): enhance asset import and management features

- Updated the `import` command to allow multiple local files and remote URLs, with restrictions on supported formats.
- Added new commands: `apply` for copying assets into project design files, `edit-as-page` for converting HTML assets into editable projects, and `figma` for exporting Figma captures.
- Introduced sidecar functionality for storing derived data alongside owned assets, including Figma capture IR and element HTML.
- Enhanced server configuration to support larger ingest payloads for asset captures.
- Improved error handling and user feedback during asset import and application processes.

* feat(asset-management): enhance asset dropzone and introduce chat-to-design feature

- Updated the DesignSystemAssetDropzone component to improve file preview handling with new functions for creating and revoking object URLs.
- Adjusted CSS for better layout and spacing in the asset dropzone.
- Added a new "Chat to design" button in the LibrarySection component, allowing users to send selected assets to the Home chat composer for project creation.
- Updated localization strings across multiple languages to reflect changes in asset import terminology.
- Enhanced the HomeView component to handle asset staging from the chat composer.

* feat(library): enhance asset application with element markup support

- Updated the `applyLibraryAsset` function to include an `includeElement` option, allowing the capture of element markup alongside assets.
- Modified related components (e.g., `ChatComposer`, `LibrarySection`, `FileWorkspace`) to handle the new element markup feature, ensuring both asset paths and optional element paths are returned and processed.
- Introduced a new function, `fetchLibraryAssetElementHtml`, to retrieve the captured HTML for element-pick assets.
- Enhanced the UI to display element markup inline within the chat composer, improving user interaction with captured elements.
- Updated API contracts to reflect changes in asset application responses, including optional element markup paths.

* feat(library): enhance asset filtering and preview handling

- Updated the LibraryPicker and LibrarySection components to implement a badge-aware kind filter, allowing for more precise asset filtering based on badge kind.
- Introduced a new `matchesKindFilter` function to streamline the filtering logic across components.
- Enhanced the DesignSystemAssetDropzone to ensure proper handling of image previews, addressing issues with broken thumbnails under React StrictMode.
- Added CSS styles for kind badges to improve asset representation in the UI.
- Implemented tests for the DesignSystemAssetDropzone to ensure correct preview lifecycle management.

* feat(library): hydrate single asset on SSE ingest

Add fetchLibraryAsset(id) so the Library grid can merge just the one
asset an `ingest` SSE event references instead of refetching the whole
list on every capture. Returns null on miss/error.

* feat(clipper): richer in-page image picker

Collect CSS background-image url()s in addition to <img> (so hero/section
art painted as backgrounds is no longer silently missed), defer thumbnail
decode to visible cells via IntersectionObserver, draw downscaled canvas
thumbnails instead of second full-res decodes, and add locate-on-page
highlighting so a picked image can be traced back to its DOM source.

* feat(library): implement lazy loading for thumbnails and enhance asset filtering

- Introduced a `LibraryThumb` component to lazily load heavy content (images, videos, iframes) only when they are near the viewport, improving performance.
- Added a debounced search feature to optimize asset filtering, reducing unnecessary network requests during rapid input.
- Enhanced the asset filtering logic to track active filters using a ref, ensuring efficient updates during live events.
- Updated the `snapshotCardRects` and `cardIdsInBand` functions to support improved hit-testing for drag-and-drop interactions.

* feat(library): lazy picker thumbnails + debounced search

Extend the Library grid's lazy-thumbnail + 250ms debounced-search pattern
to the composer LibraryPicker so opening it no longer fires one full-bytes
request per asset, and tidy the clipper content-script image collection.

* feat(clipper): compress and budget capture inlining

Re-encode large raster images to downscaled WebP and inline smallest-first
within a fixed budget, dropping only the secondary Figma IR past a safe body
size, so an image-heavy page (e.g. a news front page) always saves as an
editable HTML capture instead of 413-failing the ingest.

* test(library): LibraryPicker debounce + lazy-thumbnail coverage

Cover the composer picker's 250ms debounced search and its lazy <img>
mount (deferred until the card is in view), matching the grid's perf test.

* feat(design-system): enhance asset handling and UI for design systems

- Updated the CLI to support additional asset kinds, including 'design-system'.
- Enhanced the DesignSystemProvenance type to include source URLs, improving provenance tracking.
- Modified the design system generation jobs to correctly summarize source links and GitHub repositories.
- Updated UI components to reflect changes in asset handling, including new source link management in the DesignSystemFlow.
- Improved tests to cover new functionality for adding source links and ensuring proper handling of design system assets.

* refactor(library): rename 'design-system' to 'brand kit' and enhance thumbnail loading

- Updated labels and filters in Library components to replace 'design-system' with 'brand kit'.
- Introduced a shimmer skeleton for lazy-loaded thumbnails in the LibraryPicker to improve user experience during asset loading.
- Enhanced the PickerCard component for better performance by memoizing individual asset cards.
- Updated tests to ensure proper handling of brand kit assets and their visibility in the LibraryPicker.

* feat(clipper): implement internationalization for toolbar and popup

- Added i18n support to the clipper, enabling localization of UI elements and tooltips.
- Introduced a new i18n.js file to manage translations for various languages.
- Updated content.js and popup.js to utilize the i18n functions for dynamic text rendering.
- Enhanced accessibility by ensuring aria-labels and tooltips are also localized.
- Improved user experience by providing localized messages for actions and statuses.

* feat(clipper): enhance brand kit extraction and localization support

- Updated the brand kit extraction process to include improved handling of assets and localization for various UI elements.
- Added internationalization support for the brand kit feature, allowing for dynamic text rendering based on user locale.
- Enhanced the user experience by ensuring that all relevant messages and tooltips are localized.
- Updated tests to cover new localization features and ensure proper functionality of the brand kit extraction process.

* feat(clipper): enhance brand color derivation and update localization

- Introduced new functions for color manipulation, including linear interpolation and clamping, to improve brand color derivation.
- Updated the deriveBrandColors function to better map observed palettes to semantic roles, ensuring consistent brand representation.
- Revised localization strings in i18n.js to reflect changes from 'brand kit' to 'design system', enhancing clarity and user experience.
- Improved overall code organization and readability by refactoring existing functions and adding new utility methods.

* refactor(clipper): update terminology from 'brand kit' to 'design system'

- Replaced all instances of 'brand kit' with 'design system' across various components and localization files for consistency.
- Updated UI elements, tooltips, and documentation to reflect the new terminology.
- Enhanced user experience by ensuring clarity in the design system extraction process and related functionalities.
- Adjusted localization strings in multiple languages to align with the updated terminology.

* feat(clipper): enhance image fill handling and normalization

- Introduced functions to normalize image fills by converting non-PNG/JPEG formats (SVG, WebP, GIF, AVIF) to PNG before import, ensuring all images are properly rendered in Figma.
- Updated the UI to report the number of images converted and dropped during the import process, improving user feedback.
- Enhanced the overall image processing workflow to prevent silent failures when unsupported formats are encountered.
- Revised documentation to reflect the new image handling capabilities and supported formats.

* feat(clipper): enhance UI kit and busy state feedback

- Updated the UI kit to include new components such as inputs, selection, and overlays, improving the overall design system representation.
- Enhanced the busy state feedback during capture processes with localized messages and a step-by-step progress indicator, providing users with clearer status updates.
- Revised localization strings to support new UI elements and improve user experience across multiple languages.
- Improved documentation to reflect changes in the UI kit and busy state handling.

* fix(brands): restore design-systems nav entry + reconcile BrandsTab on re-activation

Address review feedback on PR #4260:

1. EntryNavRail dropped the only control that reached view==='design-systems'
   when Brands replaced it in the rail, leaving the still-rendered/routed
   design-system manager deep-link only (the entry-nav-design-systems e2e
   specs assert this). Restore a reachable rail entry (blocks icon, existing
   navDesignSystems key) alongside Brands.

2. BrandsTab only fetched once on mount, but EntryShell keeps sub-views
   mounted and toggles visibility, so a brand finishing extraction in its
   backing project never reconciled until a full reload. Refresh whenever the
   Brands view becomes active again, and poll while any brand is extracting
   (torn down once settled / when hidden).

Red spec: tests/components/BrandsTab.refresh.test.tsx (fails pre-fix:
fetchBrands called once, not twice).

* Update clipper/brand-capture.js

* fix(clipper): improve busy state handling and UI feedback

- Adjusted the spinner CSS to use flex properties for better layout control.
- Enhanced the reclampIfMoved function to preserve user position during busy state transitions.
- Added loading toast notifications for popup-launched captures to ensure progress visibility even when the on-page bar is hidden.

* feat(daemon): add kiwi-schema dependency and enhance Figma API integration

- Added kiwi-schema package to the daemon for improved schema handling.
- Updated FigmaApiNode interface and related functions to support shared functionality with the offline decoder, ensuring consistency in node processing.
- Refactored capture functions in clipper to maintain UI visibility during DOM/IR snapshots, enhancing user experience during capture operations.

* fix(web): surface missing backing projects

* fix(web): re-enable brand actions after use

* fix(daemon): serve brand logos from data roots

* fix(brands): reconcile failed extractions

* feat(daemon): implement offline Figma import and decoding functionality

- Added support for importing `.fig` files directly into the daemon, enabling offline processing without requiring a Figma account.
- Introduced a new `fig-decode.ts` module for decoding `.fig` files, handling both ZIP-wrapped and raw formats.
- Created `figma-import.ts` to orchestrate the import process, generating a canonical snapshot and associated metadata.
- Enhanced the server to handle Figma file uploads and integrate with the new decoding logic.
- Updated package dependencies to include `kiwi-schema`, `html2canvas`, and `jspdf` for improved functionality.
- Added tests for the new Figma import features to ensure reliability and correctness.

* feat(clipper): reload-proof capture progress badge on the extension icon

The on-page progress strip dies if a page reloads itself mid-capture
(aggressive paywall sites like economist.com do this), leaving no
loading signal. Add a per-tab '•••' badge on the extension icon for the
lifetime of any capture message — it lives on the action icon, so a page
navigation can't take it down. Verified end-to-end via a real loaded
extension.

* feat(daemon): add export functionality for Figma and enhance PDF export process

- Introduced `runFigma` command for importing Figma designs, supporting both local `.fig` files and Figma URLs.
- Added detailed usage instructions for the `od figma import` command.
- Implemented `runExport` command for programmatic export of HTML/deck artifacts to PDF, PPTX, or image formats.
- Enhanced error handling and user feedback during export processes.
- Removed obsolete `build-pptx-export-prompt` module and related tests to streamline the codebase.

* feat(daemon): enhance library synchronization and export capabilities

- Implemented `reconcileLibrary` to mirror design systems and agent-produced project deliverables into the Library as referenced assets.
- Added support for programmatic export of artifacts via the `od export` command, including detailed usage instructions.
- Introduced new functions for handling Figma imports and exports, improving integration with design workflows.
- Enhanced error handling and user feedback during synchronization and export processes.
- Added tests for new features to ensure reliability and correctness.

* feat(web): PPTX export for any shareable artifact + Library toolbar tooltips

* chore(nix): refresh pnpm deps hash

* refactor(web): enhance onboarding view and file export progress indicators

- Updated the onboarding view layout for improved accessibility and visual hierarchy, including adjustments to spacing, typography, and button styles.
- Introduced a loading toast for file export progress, displaying elapsed time and estimated time remaining for slide exports.
- Added new translation keys for export progress messages in multiple languages.
- Refactored the export progress handling to provide real-time updates during the export process, improving user feedback and experience.

* refactor(web): streamline export capture bridge and update connector styles

- Removed unused loading logic for html2canvas in the export capture bridge, simplifying the code.
- Updated CSS for the onboarding view connector to improve visual clarity and ensure it does not overlap with node numbers.

* refactor(web): remove html2canvas dependency and enhance Figma URL handling

- Removed the html2canvas package from the project, including its references in the lock file and related components.
- Added functionality to manage Figma URLs within the Design System flow, allowing users to add, remove, and validate Figma file links.
- Improved drag-and-drop handling to prevent unintended file navigation when dropping files outside designated areas.
- Updated UI components to accommodate new Figma URL features, enhancing user experience and accessibility.

* refactor(web): unify brand and design system flows

- Merged the brand extraction process into the design system creation workflow, allowing users to start from a brand directly within the design system wizard.
- Updated routing to redirect legacy brand links to the unified design systems tab.
- Enhanced the onboarding experience by removing the separate Brand Kit tab and integrating brand selection into the design system creation process.
- Improved UI components to reflect these changes, ensuring a seamless user experience across the application.

* feat(web): introduce brand enrichment banner and picker modal

- Added a new BrandEnrichmentBanner component to allow users to refine programmatically-extracted design systems with AI by selecting design-system skills.
- Implemented a BrandPickerModal for selecting brands from a searchable gallery, enhancing the design system creation flow.
- Updated ChatPane to conditionally display the enrichment banner for eligible brand projects, improving user engagement.
- Enhanced the design system flow to support the new brand enrichment features, ensuring a seamless experience for users.

* feat(web): enhance BrandPickerModal and DesignSystemAssetDropzone

- Updated the BrandPickerModal to allow scrolling of the entire picker area, improving user experience by creating a unified scrolling surface.
- Added new props to the BrandReferencePicker for action labels and scroll root reference, enhancing flexibility in brand selection.
- Introduced a new DesignKitView component for rendering design kits consistently across different surfaces.
- Enhanced the DesignSystemAssetDropzone to support a wider variety of file types with appropriate previews, improving asset management during design system creation.
- Updated styles for better visual clarity and responsiveness across components.

* feat(web): update Design Systems tab actions and enhance localization

- Changed the button label in the DesignSystemsTab from "Edit" to "Open" for better clarity in user actions.
- Added a new translation key for 'dsManager.openSystem' across multiple languages to support the updated button label.
- Enhanced the FileWorkspace component to ensure the Design Files tab aligns correctly with the Design System tab, improving UI consistency.
- Implemented a new design system editing feature that allows users to fetch and save design system content from DESIGN.md, enhancing the design workflow.

* fix(merge): repair post-merge regressions after origin/main integration

Follow-up fixes on top of the origin/main merge (886f925cd) addressing
regressions the conflict resolution introduced. main's web suite is the
oracle (100% green); resolution principle was main's engine/backend +
HEAD's UI, unioned.

daemon:
- library-sync.ts: correct design-systems import to ./design-systems/index.js
  (design-systems became a directory module on main).
- tests/server-bootstrap-regression: add LIBRARY_DIR to the PathDeps fixture
  (main-added test x HEAD-added LIBRARY_DIR field).

web:
- WorkspaceTabsBar: union — restore main's onboarding Search-popover close
  behaviour + guards, keep HEAD's library/brands nav entries.
- HomeView: restore main's composer sending-state (await onSubmit, widen its
  return type to Promise<boolean>|boolean|void, pass submitting to HomeHero).
- MemorySection.test: take main's version to match main's two-loop memory
  component.
- i18n: restore dropped settings.onboardingRoleMarketing key across types.ts
  and all locales.
- App/BrandsTab/EntryNavRail/router/home-intent: union fixes restoring main
  features dropped during conflict resolution (needs_input handling, etc.).

Validation: pnpm guard + full pnpm typecheck (all 23 packages) green.
Known-red: EntryShell onboarding step 3 intentionally retains HEAD's "build"
step rather than main's brand-extract step; 8 EntryShell.onboarding /
App.onboarding-amr-e2e tests stay red pending that onboarding decision.

* fix(merge): keep HEAD's unified brand flow (revert main's separate Brands tab)

Follow-up to 688544ff7. Per the chosen product direction (brand creation
unified into the design-system create wizard, not a standalone Brands tab),
revert the brand-flow routing/nav that the post-merge repair had restored
from main:

- router.ts: keep HEAD's brand routing (brands folded into design-systems),
  drop main's standalone /brands and /brands/:id view routing.
- EntryNavRail.tsx: drop main's standalone "Brands" nav button.
- runtime/home-intent.ts: drop main's brand "Use in new chat" confirmation
  notice plumbing (tied to the separate Brands flow).

Kept from the repair commit (additive, non-conflicting): App.tsx
loadedActiveProject correctness, composer Sending… state, WorkspaceTabsBar
onboarding popover behaviour, two-loop memory test, restored i18n keys,
brand needs_input STATUS handling, server.ts plugin-route infrastructure.

* feat(library-ui): implement conditional rendering based on LIBRARY_UI_VISIBLE

- Updated router.ts to conditionally render the library view based on the LIBRARY_UI_VISIBLE flag.
- Modified ComposerPlusMenu.tsx, DesignFilesPanel.tsx, and DesignSystemAssetDropzone.tsx to show the "Select from library" button only when LIBRARY_UI_VISIBLE is true.
- Adjusted EntryNavRail.tsx and EntryShell.tsx to include the library navigation button and section conditionally based on the LIBRARY_UI_VISIBLE state.
- Enhanced HomeHero.tsx to allow starting a blank project directly, improving user experience by providing more options for project creation.

This commit introduces a feature toggle for the library UI, allowing for better control over its visibility during development and testing.

* feat(home-hero): implement edge auto-scroll for horizontal overflow

- Introduced `useEdgeAutoScroll` hook to manage auto-scrolling behavior for horizontally overflowing components in HomeHero.
- Updated `PluginPromptPresets` and `RailGroup` components to utilize the new auto-scroll functionality, enhancing accessibility for users without trackpads.
- Added `EdgeScrollZones` component to provide interactive edge zones for scrolling.
- Enhanced CSS styles to support the new scrolling layout and ensure proper positioning of elements.

This commit improves user experience by making overflow content more accessible and easier to navigate.

* feat(design-systems): add project creation from design system and enhance UI components

- Implemented `handleCreateProjectFromDesignSystem` function in `AppInner` to facilitate project creation directly from a selected design system.
- Updated `DesignKitView` to wrap the iframe in a span for better layout control.
- Refactored CSS for `BrandPreviewCard` and `DesignSystemsTab` to improve styling and responsiveness.
- Introduced a new `TemplatePicker` component in `HomeHero` for selecting project-type templates, enhancing user experience.
- Updated various components to support asynchronous handlers for design system actions, improving overall functionality.

This commit enhances the design system integration and user interface, making project creation more intuitive and accessible.

* feat(brand-routes): enhance brand reservation API and add DESIGN.md support

- Updated the POST /api/brands endpoint to accept optional fields: description and designMd, allowing for more flexible brand reservations.
- Modified validation to require either a URL or designMd for brand extraction.
- Introduced a new design-md-input module to handle parsing and validation of DESIGN.md content.
- Enhanced startBrandExtraction function to support processing of DESIGN.md, improving integration with design systems.
- Added utility functions for managing DESIGN.md input and output, streamlining the brand creation process.

This commit improves the brand extraction workflow by integrating DESIGN.md support, making it easier for users to create and manage brands.

* feat(chat-pane, design-kit-view): enhance chat functionality and design preview features

- Added `handleNextStepPromptAction` to `ChatPane` for setting draft prompts, improving user interaction.
- Introduced `nextStepVariant` to differentiate design system projects in `ChatPane`.
- Updated `DesignKitView` to include a button for previewing design kit covers, enhancing user experience.
- Implemented a modal for displaying design kit previews, allowing users to view content in a dedicated space.

These changes improve the chat interface and design kit interactions, making the application more intuitive and user-friendly.

* feat(brand-extraction): enhance DESIGN.md support and testing

- Added a new test case to validate brand extraction from DESIGN.md input without requiring a website.
- Implemented functionality to register brands directly from DESIGN.md, improving the brand creation workflow.
- Updated the `ChatPane` and `NextStepActions` components to handle design system-specific actions for projects, enhancing user experience.
- Enhanced localization files with new carousel hints and project brief options across multiple languages.

These changes streamline the brand extraction process and improve the overall functionality of the design system integration.

* feat(wireframe-examples): add annotated and greybox wireframe examples

- Introduced new wireframe examples for annotated and greybox styles, enhancing design system capabilities.
- Added HTML and JSON files for both wireframe types, providing templates for low-fidelity design mockups.
- Implemented SKILL.md documentation for each wireframe example, detailing usage and design specifications.

These additions improve the design toolkit, offering users more options for creating wireframes in various styles.

* feat(brand-extraction): refine Chrome fallback and enhance error handling

- Updated the Chrome fallback logic in the prefetch pipeline to clarify its purpose and usage as a diagnostic tool.
- Introduced environment variable checks to enable or disable system Chrome usage, improving control over the extraction process.
- Enhanced error messages in the DesignSystemCreationFlow component to provide clearer guidance on required inputs for creating a design system.
- Added regression tests to ensure that prompts do not instruct the agent to invoke a non-existent `brand-extract` skill, preventing potential failures during brand extraction.

These changes improve the robustness of the brand extraction process and enhance user experience by providing clearer instructions and error handling.

* feat(brand-extraction): enhance DESIGN.md input handling and introduce brand ready prompt

- Updated the BrandFromDesignMdInput interface to explicitly define the description property as optional with undefined.
- Enhanced the brand extraction prompts to clarify the inline brand-extract workflow, preventing confusion during the extraction process.
- Added a new BrandReadyPrompt component to notify users when a design system is ready for preview, improving user experience.
- Introduced CSS styles for the BrandReadyPrompt to ensure a visually appealing and user-friendly interface.
- Updated localization files to support new strings related to the brand ready prompt across multiple languages.

These changes improve the clarity and usability of the brand extraction process, providing users with timely feedback and a more intuitive interface.

* feat(brand-extraction): improve design system focus handling and localization updates

- Refactored the handling of browser tabs in the brand extraction tests to ensure proper validation of tab states.
- Enhanced the AppInner component to refresh design systems alongside templates, ensuring users see the latest updates without page reloads.
- Introduced a pending focus state in the DesignSystemsTab to manage design system selection more effectively after brand extraction.
- Added a BrandReadyPrompt in the ProjectView to notify users when a design system is ready for preview, improving user engagement.
- Updated localization files for Chinese (Simplified and Traditional) to reflect changes in terminology related to design systems.

These changes enhance the user experience by providing timely feedback and ensuring that the design system selection process is seamless and intuitive.

* fix(styles): adjust letter-spacing and enhance plus-menu trigger styles

- Set letter-spacing to 0 in design-system-flow.css for improved text clarity.
- Added styles for plus-menu trigger in plus-menu.css, including background, border, and hover effects to enhance user interaction and visual consistency.

These changes refine the design aesthetics and improve the usability of the plus-menu component.

* feat(tests): add design-system focus handoff tests

- Introduced a new test suite for validating the design-system focus handoff functionality.
- Implemented tests to ensure that the focus ID is correctly set, read, and cleared from session storage, preventing user selection hijacking.
- Added checks for scenarios where no focus ID is pending, enhancing test coverage for the design system's behavior.

These tests ensure the reliability of the design-system focus handling, contributing to a more robust user experience.

* feat(export): restrict image format options to PNG and JPEG

- Updated the image format options in the export functionality to only allow PNG and JPEG, removing WebP to prevent silent downgrades.
- Enhanced error handling to provide clear feedback when an unsupported image format is specified.
- Adjusted related documentation and comments to reflect the changes in supported formats across the application.

These changes ensure consistency in image export behavior and improve user experience by providing immediate validation errors for unsupported formats.

* feat(origin-validation): implement zero-config OD Clipper bypass for library requests

- Added a new function `isZeroConfigClipperLibraryRequest` to validate requests from locally-installed browser extensions targeting the `/library/` path.
- Updated the origin validation middleware to utilize this function, allowing unpaired browser extensions to access the `/api/library/ingest` endpoint while blocking other cross-origin requests.
- Enhanced tests to cover the new bypass functionality, ensuring correct behavior for both valid and invalid origins.

These changes improve the integration of browser extensions with the local daemon, enhancing user experience while maintaining security.

* feat(design-systems): add download functionality for design systems

- Implemented a new command `od design-systems download <id>` to allow users to download design systems as a .zip file, including all system files and a generated SKILLS.md usage guide.
- Updated the CLI help documentation to include usage instructions for the new download command.
- Enhanced the design systems API to support the download feature, ensuring only user design systems are accessible while handling errors for non-existent presets.
- Added localization strings for the new download functionality across multiple languages.

These changes enhance the usability of design systems by providing a straightforward method for users to obtain and share their design assets.

* feat(design-systems): enhance design system management and localization

- Introduced new UI components and styles for managing design systems, including buttons for downloading, refreshing, and resetting edits.
- Updated the DesignKitView to support direct actions for DESIGN.md editing, improving user interaction with design systems.
- Enhanced the DesignSystemDetail component to include download functionality and improved state management for design system edits.
- Added localization strings for new features, ensuring consistent user experience across multiple languages.
- Improved error handling and user feedback for design system operations, including download failures.

These changes streamline the design system management process, making it more intuitive and user-friendly while ensuring robust localization support.

* feat(tests): add comprehensive tests for design system archive functionality

- Introduced a new test suite for validating the `buildUserDesignSystemArchive` and `buildDesignSystemSkillsMarkdown` functions.
- Implemented tests to ensure correct packing of design system files, including the generation of a `SKILLS.md` guide and exclusion of internal metadata.
- Added checks for handling non-user IDs and scenarios where a design system already includes its own `SKILLS.md`.
- Enhanced the overall test coverage for design system functionalities, ensuring reliability and correctness in the design system archive process.

These changes improve the robustness of the design system features by ensuring thorough testing of critical functionalities.

* feat(figma-import): enhance CLI output and add Figma import endpoint

- Updated the CLI to conditionally log detailed import information based on the `--json` flag, improving usability for users who prefer JSON output.
- Introduced a new API endpoint for importing Figma files, handling file uploads and validating project existence, with appropriate error responses for missing files or invalid URLs.
- Added a dedicated route for the Figma import functionality, ensuring seamless integration with existing project workflows.

These changes improve the Figma import experience by providing clearer output options and robust error handling, enhancing overall user interaction with the CLI and API.

* feat(design-files): enhance DesignFilesPanel with new actions and styles

- Added new action buttons for opening a browser and creating a design system in the DesignFilesPanel, improving user interaction in the empty state.
- Updated styles for action buttons to enhance visual distinction and usability.
- Enhanced tests to verify the functionality of new actions in the DesignFilesPanel, ensuring they trigger correctly.

These changes improve the user experience by providing additional functionality and clearer visual cues in the design files interface.

* fix(ci): restore new project modal flow

* fix(ci): align design kit and onboarding checks

* fix(ci): sync bake preview workflow action

* fix(ci): include plugin preview helper scripts

* fix(review): harden brand source and preview flows

* fix(ci): stabilize web workspace tests

* fix(review): address latest blocking feedback

* chore(ci): retrigger validation after label update

* chore: re-trigger CI on updated main — needs-validation gate moved to merge_group (#4714)

* refactor(lightbox): implement portal for overlays to resolve z-index issues

- Updated the lightbox component to use React's createPortal for rendering overlays directly to the <body>, ensuring proper z-index stacking.
- Removed session mode toggle from HomeHero and adjusted related styles and tests accordingly.
- Cleaned up CSS by removing unused styles related to session mode toggle.
- Updated tests to reflect changes in the HomeHero component and its interaction with the design router.

* style(home-hero): remove focus halo from template search input

- Updated CSS to eliminate the global input focus outline and box-shadow for the template search field in the HomeHero component.
- Added a test to verify that the template picker search field maintains a clean appearance when focused.

* feat(design-system): add create design CTA and enhance design kit functionality

- Introduced a new `DesignSystemCreateCta` component to facilitate creating new designs from an active design system, enhancing user experience in the chat interface.
- Updated `ChatPane` to include the new CTA, allowing users to create designs directly from the chat.
- Enhanced `DesignKitView` with sticky header functionality for better accessibility while scrolling.
- Added new CSS styles for the `DesignSystemCreateCta` component to ensure a visually appealing and consistent design.
- Updated internationalization files to include new strings for the design system creation feature.

* feat(upload): enhance file upload handling and error recovery

- Introduced `sanitizePath` to preserve directory structures during file uploads, preventing issues with subdirectory paths.
- Updated `DesignKitView` and related components to utilize the new `sanitizePath` function for improved file name resolution.
- Added `KitErrorBoundary` component to gracefully handle rendering errors in the design kit, providing a user-friendly fallback.
- Implemented internationalization updates for new error messages and action confirmations related to uploads and error handling.
- Enhanced CSS styles for better visual feedback during error states and improved user experience.

* feat(design-kit): add keyboard shortcuts hint and enhance key handling

- Introduced a new keyboard shortcuts hint in the DesignKitView, providing users with quick access to essential actions (E edit, C copy, U upload, R refresh, ⌫ delete logo).
- Implemented a keydown event handler to manage keyboard shortcuts contextually within the design kit, improving user interaction and accessibility.
- Updated CSS for the shortcuts hint to ensure it remains low-contrast until hovered, enhancing the UI experience.
- Added internationalization support for new shortcut labels and hints across multiple languages.
- Adjusted DesignSystemsTab to prefer user logos for their systems, improving visual consistency.

* feat(design-system): introduce DesignSystemExtractionPanel and enhance design system interactions

- Added the `DesignSystemExtractionPanel` component to facilitate user interactions during design system extraction, providing a synthesized conversation view and next steps.
- Updated `ChatPane` to render the new extraction panel when a design system is active, enhancing user guidance.
- Introduced a new utility function `designSystemExtractionSource` to derive human-readable labels for design system sources.
- Enhanced internationalization support with new strings for extraction-related actions and prompts across multiple languages.
- Updated various components and tests to reflect changes in terminology and functionality, improving overall user experience.

* feat(project): add project deletion functionality and enhance design system interactions

- Introduced `onDeleteProject` prop in `ProjectView` to handle project deletion, improving project management capabilities.
- Updated `AppInner` to include the new delete project handler, enhancing user experience in project interactions.
- Enhanced `DesignKitView` and `DesignSystemsTab` with loading states and improved visual feedback during design system resolution.
- Removed deprecated `DesignSystemCreateCta` component and associated styles, streamlining the codebase.
- Updated internationalization files to reflect changes in project management terminology and actions.

* feat(design-kit): enhance internationalization and user feedback in DesignKitView

- Updated various labels and error messages in the DesignKitView to utilize internationalization functions, improving accessibility and user experience.
- Enhanced color input validation messages and added confirmation prompts for design system deletions in DesignSystemsTab and FileWorkspace.
- Introduced new props for handling design system project deletions, streamlining project management.
- Updated internationalization files to reflect new strings and translations for improved user guidance across multiple languages.

* refactor(design-kit): remove keyboard shortcuts hint and streamline header menu

- Eliminated the keyboard shortcuts hint from the DesignKitView, simplifying the header menu.
- Updated the sticky-header overflow menu to exclude upload, full-system preview, and shortcut help actions, focusing on essential project operations.
- Adjusted related tests to reflect the removal of the shortcuts hint and ensure accurate menu item visibility.

* feat(brand-routes): add extract-from-html endpoint for brand extraction

- Introduced a new POST endpoint `/api/brands/:id/extract-from-html` to re-run brand extraction using HTML rendered from the in-app browser after clearing anti-bot walls.
- Implemented error handling for missing HTML and brand not found scenarios.
- Enhanced the `extractBrandFromHtml` function to process the provided HTML and optional CSS, integrating it into the existing brand extraction workflow.
- Updated `prefetch` functionality to support extraction from pre-rendered HTML, improving the overall brand data retrieval process.

* chore(nix): refresh pnpm deps hash

* feat(brand-cli): add extract-from-html command for brand extraction

- Introduced a new CLI command `od brand extract-from-html` to facilitate brand extraction from pre-captured rendered HTML, allowing users to bypass anti-bot walls.
- Enhanced the command to accept optional CSS and base URL parameters, improving flexibility in extraction scenarios.
- Implemented error handling for missing HTML input and invalid brand IDs, ensuring robust user feedback.
- Updated the `BRAND_USAGE` documentation to reflect the new command and its usage details.
- Adjusted server configuration to accommodate larger payloads for the new extraction endpoint.

* feat(design-system): enhance design system extraction and browser tools

- Added a new script to collect CSS styles from rendered pages, improving brand extraction capabilities by capturing computed styles from cross-origin stylesheets.
- Removed the `DesignSystemExtractionPanel` component and its associated styles, streamlining the codebase.
- Updated `ProjectView` and `FileWorkspace` components to enhance design system interactions and improve user experience.
- Introduced new internationalization strings for design system phases and actions, ensuring better user guidance across multiple languages.

* feat(brand-assist): implement browser assist for brand extraction

- Added support for a client-side confirmation mechanism for the brand-browser-assist od-card, allowing users to extract brand information from the unblocked browser DOM.
- Enhanced the `ProjectView`, `ChatPane`, and `AssistantMessage` components to handle the new assist functionality, improving user interaction during brand extraction.
- Introduced new internationalization strings for browser assist prompts and messages, ensuring clarity and guidance across multiple languages.
- Updated the `useBrandReadyPrompt` hook to manage the state of the browser assist, providing a seamless user experience when dealing with anti-bot walls.

* feat(brand-prompt): enhance BrandReadyPrompt with refinement options

- Updated the BrandReadyPrompt component to include options for AI optimization and manual editing, allowing users to refine extracted brand systems.
- Added a new refinement nudge to inform users that automatic extraction may miss details, improving user guidance.
- Adjusted styles for the prompt and dismiss button for better alignment and visual consistency.
- Introduced new internationalization strings for the refinement features, ensuring clarity across multiple languages.
- Removed deprecated PPTX export functionality from the FileViewer component, streamlining the export options.

* refactor(export): remove PPTX export functionality and streamline export options

- Eliminated PPTX export support across various components, including CLI, desktop, and web, to simplify export formats.
- Updated documentation and help messages to reflect the removal of PPTX, ensuring clarity for users.
- Adjusted export-related types and constants to focus on PDF and image formats only, enhancing code maintainability.
- Improved user experience by refining export options and related UI elements.

* refactor(export): remove PPTX references and update export functionality

- Removed all instances of PPTX export functionality from the codebase, including related dependencies and comments.
- Updated export options to focus solely on PDF and image formats, enhancing clarity and maintainability.
- Adjusted UI components and tests to reflect the removal of PPTX, ensuring a streamlined user experience.
- Improved internationalization strings and documentation to align with the new export capabilities.

* chore(nix): refresh pnpm deps hash

* fix(onboarding): preserve selected runtime

* fix(brand): localize generated kit copy

* fix(onboarding): align first-run flow with main

* fix(nav): use palette icon for design systems

* fix(analytics): use design system onboarding step

* fix(ui): remove design system guide toggle

* fix(ui): position design system ready prompt

* fix(ui): space plugin task notice

* fix(web): restore home ask mode and design kit preview

* test(e2e): align onboarding visual capture

* test(e2e): align amr onboarding checks

* fix(brand): remove blocked reference brands

* feat(onboarding): show profile choices as chips

* fix(home): prefer design system cover art in recents

* test(e2e): select onboarding profile chips

* feat(brand-extraction): implement programmatic extraction transcript and UI enhancements for design systems

* feat(brand-extraction): enhance programmatic extraction with transcript agent support and UI improvements

* feat(brand-extraction): add transcript agent resolution and improve message handling in brand extraction

* fix(design-systems): stabilize loading state coverage

* test(e2e): align design system detail visual

* fix(brand-extraction): backfill programmatic transcripts

* fix(web): refresh ready brand design systems

* fix(brands): stabilize extraction handoff and seed colors

* fix(brands): return extraction transcript immediately

* fix(web): open new project modal from entry rail

* fix(editing): expose content edits for plain targets

* feat(file-viewer): implement manual edit draft dirty state tracking and reset logic

* feat(design-system): enhance project creation flow with conversation ID handling

* feat(brands): implement light theme handling for color extraction and seed generation

* feat(brands): add finalizeBrandProject function for brand project completion

* feat(file-workspace): add designSystemBrandId prop and update DesignSystemProjectPanel to use it

* Fix manual editing for brand kits

* fix(design-system): wait for project refreshes

* fix(web): open new project modal from rail

* fix(web): restore home ask mode toggle

* fix(web): sync brand color edits with seeds

* fix(web): stabilize design system workspace tests

* test(tools-pack): relax Windows resource cache timeout

* chore(pr): retrigger review after validation

* fix(web): surface design kit action progress

* fix(web): clarify brand next-step actions

* fix(web): cancel programmatic brand extraction

* fix(web): add design systems tab action feedback

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: xne998808-ai <xne998808@gmail.com>
Co-authored-by: PerishCode <perishcode@gmail.com>
Co-authored-by: open-design-bot[bot] <282769551+open-design-bot[bot]@users.noreply.github.com>
Co-authored-by: lefarcen <935902669@qq.com>
Co-authored-by: Siri-Ray <2667192167@qq.com>
2026-06-25 03:56:14 +00:00

652 lines
48 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
// Open Design Web Clipper i18n runtime.
//
// Standalone on purpose: the clipper is not part of the pnpm workspace, so the
// popup, content script, service worker, and injected design-system renderer all use
// this small browser/worker-safe dictionary instead of importing app code.
(function () {
const LOCALES = ['en', 'id', 'de', 'zh-CN', 'zh-TW', 'pt-BR', 'es-ES', 'ru', 'fa', 'ar', 'ja', 'ko', 'pl', 'hu', 'fr', 'uk', 'tr', 'th', 'it', 'vi', 'nl'];
const RTL = new Set(['ar', 'fa']);
const en = {
extensionName: 'Open Design Web Clipper',
extensionDescription: 'Clip pages, design systems, screenshots, images, and Figma import JSON into your Open Design Library.',
webClipper: 'Web Clipper',
openDesign: 'Open Design',
statusConnected: 'Connected',
statusOffline: 'Offline',
infoLabel: 'What gets captured',
infoTooltip: '"Capture page" saves a self-contained page copy. "Extract design system" saves a structured design-system HTML asset. Figma JSON must be imported with the OD Figma Import plugin, not dragged into Figma Drafts.',
capturePageTitle: 'Capture page',
capturePageSub: 'Full-fidelity snapshot -> Library',
screenshot: 'Screenshot',
region: 'Region',
pickImages: 'Pick images',
pickElement: 'Pick element',
figmaJson: 'Figma JSON',
extractDesignSystem: 'Extract design system',
hintHtml: '<strong>Open Design</strong> is not running. Start the app, then reopen this popup - the clipper connects automatically.',
advanced: 'Advanced',
onPageBar: 'On-page bar',
onPageBarSub: 'floating launcher on the page',
imageHoverButton: 'Image hover button',
imageHoverButtonSub: 'tiny save button on each image',
inlineImages: 'Inline images',
inlineImagesSub: 'higher fidelity, larger files',
daemonUrl: 'Daemon URL',
save: 'Save',
refreshPage: 'Refresh page',
refreshPageTitle: 'Reload this page so Open Design can attach',
toggleOnPageBar: 'Toggle the on-page bar',
toggleImageHover: 'Toggle the per-image hover capture button',
close: 'Close',
cancel: 'Cancel',
clear: 'Clear',
selectAll: 'Select all',
unknown: 'unknown',
noResponse: 'no response',
failed: 'Failed: {error}',
extensionErrorReload: 'Extension error - reload the page',
openDesignNotRunning: 'Open Design is not running - start the app first.',
savedConnected: 'Saved - connected.',
savedNotDetected: 'Saved, but Open Design was not detected at that URL.',
capturingPage: 'Capturing page...',
pageAlreadyInLibrary: 'Page already in library.',
largePagePartialLayout: 'large page - partial layout',
figmaLayoutSkippedPageTooLarge: 'Figma layout skipped - page too large',
resourcesLeftLinks: '{count} resource(s) left as links',
imagesLeftLinks: '{count} image(s) left as links',
savedPageWithFigma: 'Saved page + Figma capture{suffix} to library.',
savedPage: 'Saved page{suffix} to library.',
buildingFigma: 'Building Figma import JSON...',
figmaDownloaded: 'Figma JSON downloaded. Open it with the OD Figma Import plugin (Figma -> Plugins -> Development) - do not drag the file into Figma. First time: install the plugin once from figma-plugin/ (see its README).',
extractingDesignSystem: 'Extracting design system...',
designSystemAlreadyInLibrary: 'Design system already in library{suffix}.',
designSystemSaved: 'Design system saved to library{suffix}.',
capturingScreenshot: 'Capturing screenshot...',
alreadyInLibrary: 'Already in library.',
screenshotSaved: 'Screenshot saved to library.',
openNormalPage: 'Open a normal web page to use this.',
openNormalPageForBar: 'Open a normal web page to use the on-page bar.',
odNotAttached: 'Open Design has not attached to this page yet.',
elementPickerUnavailable: 'The element picker is not available on this page - try a normal website.',
imagePickerUnavailable: 'The image picker is not available on this page - try a normal website.',
regionUnavailable: 'Region capture is not available on this page - try a normal website.',
clickElement: 'Click an element on the page...',
pickImagesOnPage: 'Pick images on the page...',
dragRegionOnPage: 'Drag a region on the page...',
onPageBarUnavailable: 'The on-page bar is not available on this page - try a normal website.',
onPageBarShown: 'On-page bar shown.',
onPageBarHidden: 'On-page bar hidden.',
imageHoverOn: 'Image hover button on.',
imageHoverOff: 'Image hover button off.',
readyTryAgain: 'Ready - try again.',
reloadingPage: 'Reloading the page...',
reloadedReopen: 'Reloaded - reopen this popup to continue.',
toolbarDrag: 'Drag to move',
toolbarDragLabel: 'Drag the Open Design bar',
toolbarHomeTip: 'Open Design - open-design.ai',
toolbarHomeLabel: 'Open Design home',
toolbarCapturePage: 'Capture page -> Library',
toolbarExtractDesignSystem: 'Extract design system',
toolbarDownloadFigma: 'Download Figma import JSON',
toolbarCaptureScreenshot: 'Capture screenshot',
toolbarCaptureRegion: 'Capture a region',
toolbarPickImages: 'Pick images to save',
toolbarPickElement: 'Pick an element to capture',
toolbarHide: 'Hide Open Design bar',
openDesignStartApp: 'Open Design is not running - start the app',
savedPageFigmaShort: 'Saved page + Figma',
savedPageShort: 'Saved page',
someImagesLeftLinks: 'some images left as links',
savedDesignSystemShort: 'Saved design system',
savedScreenshot: 'Saved screenshot',
elementPickerTitle: 'Select an element',
elementPickerHint: 'hover, then click to capture',
capture: 'Capture',
elementPickCancelled: 'Element pick cancelled',
elementNoVisibleSize: 'That element has no visible size',
elementAlreadyInLibrary: 'Element already in library',
elementSaved: 'Saved element to library',
noImagesFound: 'No images found on this page',
selectImagesToSave: 'Select images to save',
selectedCount: '{selected} / {total} selected',
saveNToLibrary: 'Save {count} to Library',
imageLabel: 'Image {index}',
findOnPage: 'Find on page',
saving: 'Saving...',
savingImages: 'Saving {count} image(s)...',
savedImagesCount: 'Saved {count}/{total} image(s) to library',
// On-bar progress while a capture runs: a step counter, a rough ETA, and a
// patience line once the wait runs past the expected budget.
busyStepOf: 'Step {step} of {total}',
busyAbout: 'about {sec}s',
busyTakingLonger: 'Still working — thanks for your patience',
busyPageSnapshot: 'Snapshotting the page…',
busyPageInline: 'Inlining styles & images…',
busyPageSaving: 'Saving to your Library…',
busySystemReading: 'Reading page styles…',
busySystemExtract: 'Extracting colors, type & components…',
busySystemBuilding: 'Building the design-system asset…',
busySystemSaving: 'Saving to your Library…',
busyFigmaReading: 'Reading the page layout…',
busyFigmaBuilding: 'Building Figma import JSON…',
busyFigmaPreparing: 'Preparing the download…',
busyShotCapturing: 'Capturing screenshot…',
busyShotSaving: 'Saving to your Library…',
busyRegionCapturing: 'Capturing the region…',
busyRegionSaving: 'Saving to your Library…',
busyElementCapturing: 'Capturing the element…',
busyElementSaving: 'Saving to your Library…',
busyImagesDownloading: 'Downloading {count} image(s)…',
busyImagesSaving: 'Saving to your Library…',
regionTooSmall: 'Region too small - drag a larger box',
regionCancelled: 'Region capture cancelled',
dragToSelectRegion: 'Drag',
dragToSelectRegionTail: 'to select a region',
regionAlreadyInLibrary: 'Region already in library',
regionSaved: 'Saved region to library',
saveImageToLibrary: 'Save image to Open Design Library',
saveImageToOpenDesign: 'Save image to Open Design',
savingImage: 'Saving image...',
imageSaved: 'Saved image to library',
imageSaveFailed: 'Could not save that image',
errorCaptureTooLarge: 'Capture too large - try unchecking "Inline images" in Advanced',
errorDesignSystemCaptureFailed: 'design system capture failed',
brandFallbackTitle: 'Captured brand',
brandFallbackDescription: 'Programmatically extracted from the live web page.',
brandPageTitleSuffix: 'Design System Capture',
brandFileTitle: '{title} Design System',
brandExtracted: 'Extracted design system',
brandAssetMap: 'Brand asset map',
brandAssetMapSub: '6 extracted groups',
brandLogo: 'Logo',
brandImages: 'Images',
brandTypography: 'Typography',
brandPalette: 'Palette',
brandVoice: 'Voice',
brandComponents: 'Components',
brandLogoCount: '{count} marks and app icons',
brandImageCount: '{count} representative images',
brandFontCount: '{count} font families',
brandColorCount: '{count} observed colors',
brandHeadingCount: '{count} heading samples',
brandComponentSummary: 'Buttons, fields, cards and navigation',
brandIdentity: 'Identity',
brandLogoSub: 'Brand marks',
brandTypographySub: 'Live computed styles',
brandPaletteSub: 'Light and dark tokens',
brandComponentKit: 'Component kit',
brandComponentKitSub: 'Template filled from page tokens',
brandImagesSub: 'Representative assets',
brandVoiceContent: 'Voice & Content',
brandVoiceContentSub: 'Detected headings',
brandNoImages: 'No large page images were detected.',
brandObservedColor: 'observed color',
brandNoHeading: 'No heading sample was available.',
brandKeywordFallback: 'captured brand',
brandAssetAlt: 'Brand asset',
brandLogoAsset: 'Logo asset',
brandImageAlt: 'Brand image {index}',
brandImageLabel: 'Image {index}',
brandTheme: 'Theme',
brandLight: 'Light',
brandDark: 'Dark',
brandPrimaryAction: 'Primary action',
brandSecondaryAction: 'Secondary',
brandFormField: 'Form field',
brandFormFieldSample: 'Form field sample',
brandSurfaceCard: 'Surface card',
brandSurfaceCardText: 'Radius, border, color and type inherit from the extracted design system.',
brandNavigationItem: 'Navigation item',
brandDataNote: 'This file contains a structured JSON payload at <code>#od-design-system-data</code> for future automation.',
swatchBackground: 'Background',
swatchSurface: 'Surface',
swatchForeground: 'Foreground',
swatchMuted: 'Muted',
swatchBorder: 'Border',
swatchAccent: 'Accent',
swatchSupport: 'Support',
swatchHighlight: 'Highlight',
swatchColor: 'Color {index}',
};
const overrides = {
id: {
extensionDescription: 'Klip halaman, sistem desain, tangkapan layar, gambar, dan JSON impor Figma ke Library Open Design.',
webClipper: 'Web Clipper', statusConnected: 'Terhubung', statusOffline: 'Offline',
capturePageTitle: 'Klip halaman', capturePageSub: 'Snapshot lengkap -> Library',
screenshot: 'Tangkapan layar', region: 'Area', pickImages: 'Pilih gambar', pickElement: 'Pilih elemen',
extractDesignSystem: 'Ekstrak sistem desain', advanced: 'Lanjutan', inlineImages: 'Sematkan gambar',
onPageBar: 'Bilah di halaman', imageHoverButton: 'Tombol gambar', save: 'Simpan', refreshPage: 'Muat ulang halaman',
extractingDesignSystem: 'Mengekstrak sistem desain...', designSystemSaved: 'Sistem desain disimpan ke library{suffix}.',
toolbarExtractDesignSystem: 'Ekstrak sistem desain', savedDesignSystemShort: 'Sistem desain disimpan',
brandExtracted: 'Sistem desain diekstrak', brandPageTitleSuffix: 'Tangkapan Sistem Desain', brandAssetMap: 'Peta aset sistem desain',
brandIdentity: 'Identitas', brandLogo: 'Logo', brandImages: 'Gambar', brandTypography: 'Tipografi',
brandPalette: 'Palet', brandVoice: 'Suara', brandComponents: 'Komponen', brandComponentKit: 'Kit komponen',
},
de: {
extensionDescription: 'Sammle Seiten, Designsysteme, Screenshots, Bilder und Figma-Import-JSON in deiner Open Design Library.',
webClipper: 'Web Clipper', statusConnected: 'Verbunden', statusOffline: 'Offline',
capturePageTitle: 'Seite erfassen', capturePageSub: 'Vollständiger Snapshot -> Library',
screenshot: 'Screenshot', region: 'Bereich', pickImages: 'Bilder wählen', pickElement: 'Element wählen',
extractDesignSystem: 'Designsystem extrahieren', advanced: 'Erweitert', inlineImages: 'Bilder einbetten',
onPageBar: 'Seitenleiste', imageHoverButton: 'Bild-Hover-Button', save: 'Speichern', refreshPage: 'Seite neu laden',
extractingDesignSystem: 'Designsystem wird extrahiert...', designSystemSaved: 'Designsystem in Library gespeichert{suffix}.',
toolbarExtractDesignSystem: 'Designsystem extrahieren', savedDesignSystemShort: 'Designsystem gespeichert',
brandExtracted: 'Extrahiertes Designsystem', brandPageTitleSuffix: 'Designsystem-Erfassung', brandAssetMap: 'Designsystem-Asset-Karte',
brandIdentity: 'Identität', brandLogo: 'Logo', brandImages: 'Bilder', brandTypography: 'Typografie',
brandPalette: 'Palette', brandVoice: 'Stimme', brandComponents: 'Komponenten', brandComponentKit: 'Komponenten-Kit',
},
'zh-CN': {
extensionName: 'Open Design 网页剪藏',
extensionDescription: '将网页、设计系统、截图、图片和 Figma 导入 JSON 剪藏到 Open Design 素材库。',
webClipper: '网页剪藏', statusConnected: '已连接', statusOffline: '离线',
infoLabel: '捕获内容说明',
infoTooltip: '“捕获页面”会保存自包含页面副本。“提取设计系统”会保存结构化设计系统 HTML 资产。Figma JSON 需要在 OD Figma Import 插件内导入，不能拖进 Figma Drafts。',
capturePageTitle: '捕获页面', capturePageSub: '高保真快照 -> 素材库',
screenshot: '截图', region: '区域', pickImages: '选择图片', pickElement: '选择元素',
figmaJson: 'Figma JSON', extractDesignSystem: '提取设计系统',
hintHtml: '<strong>Open Design</strong> 未运行。启动应用后重新打开此弹窗，插件会自动连接。',
advanced: '高级', onPageBar: '页面浮条', onPageBarSub: '网页上的悬浮启动器',
imageHoverButton: '图片悬浮按钮', imageHoverButtonSub: '每张图片上的小保存按钮',
inlineImages: '内联图片', inlineImagesSub: '保真度更高，文件更大',
daemonUrl: 'Daemon 地址', save: '保存', refreshPage: '刷新页面', refreshPageTitle: '刷新此页面以便 Open Design 挂载',
toggleOnPageBar: '切换页面浮条', toggleImageHover: '切换图片悬浮捕获按钮',
openDesignNotRunning: 'Open Design 未运行，请先启动应用。', savedConnected: '已保存，已连接。',
savedNotDetected: '已保存，但该地址未检测到 Open Design。', capturingPage: '正在捕获页面...',
pageAlreadyInLibrary: '页面已在素材库中。', largePagePartialLayout: '页面较大，布局部分捕获',
figmaLayoutSkippedPageTooLarge: '页面过大，已跳过 Figma 布局', resourcesLeftLinks: '{count} 个资源保留为链接',
imagesLeftLinks: '{count} 张图片保留为链接', savedPageWithFigma: '已保存页面 + Figma 捕获{suffix}到素材库。',
savedPage: '已保存页面{suffix}到素材库。', buildingFigma: '正在生成 Figma 导入 JSON...',
figmaDownloaded: 'Figma JSON 已下载。请用 OD Figma Import 插件打开（Figma -> Plugins -> Development），不要直接把文件拖进 Figma。首次使用需先从 figma-plugin/ 安装插件（见其 README）。',
extractingDesignSystem: '正在提取设计系统...', designSystemAlreadyInLibrary: '设计系统已在素材库中{suffix}。',
designSystemSaved: '设计系统已保存到素材库{suffix}。', capturingScreenshot: '正在截图...',
alreadyInLibrary: '已在素材库中。', screenshotSaved: '截图已保存到素材库。',
openNormalPage: '请打开普通网页后使用。', openNormalPageForBar: '请打开普通网页后使用页面浮条。',
odNotAttached: 'Open Design 尚未挂载到此页面。', elementPickerUnavailable: '此页面不可使用元素选择器，请尝试普通网站。',
imagePickerUnavailable: '此页面不可使用图片选择器，请尝试普通网站。', regionUnavailable: '此页面不可使用区域截图，请尝试普通网站。',
clickElement: '在页面上点击一个元素...', pickImagesOnPage: '在页面上选择图片...', dragRegionOnPage: '在页面上拖选区域...',
onPageBarUnavailable: '此页面不可使用页面浮条，请尝试普通网站。', onPageBarShown: '页面浮条已显示。',
onPageBarHidden: '页面浮条已隐藏。', imageHoverOn: '图片悬浮按钮已开启。', imageHoverOff: '图片悬浮按钮已关闭。',
readyTryAgain: '已就绪，请重试。', reloadingPage: '正在刷新页面...', reloadedReopen: '已刷新，请重新打开此弹窗继续。',
toolbarDrag: '拖动移动', toolbarDragLabel: '拖动 Open Design 浮条', toolbarCapturePage: '捕获页面 -> 素材库',
toolbarExtractDesignSystem: '提取设计系统', toolbarDownloadFigma: '下载 Figma 导入 JSON', toolbarCaptureScreenshot: '截图',
toolbarCaptureRegion: '捕获区域', toolbarPickImages: '选择要保存的图片', toolbarPickElement: '选择要捕获的元素',
toolbarHide: '隐藏 Open Design 浮条', openDesignStartApp: 'Open Design 未运行，请启动应用',
savedPageFigmaShort: '已保存页面 + Figma', savedPageShort: '已保存页面', someImagesLeftLinks: '部分图片保留为链接',
savedDesignSystemShort: '已保存设计系统', savedScreenshot: '已保存截图',
elementPickerTitle: '选择元素', elementPickerHint: '悬停后点击捕获', capture: '捕获', cancel: '取消', clear: '清除',
selectAll: '全选', close: '关闭', elementPickCancelled: '已取消元素选择', elementNoVisibleSize: '该元素没有可见尺寸',
elementAlreadyInLibrary: '元素已在素材库中', elementSaved: '元素已保存到素材库',
noImagesFound: '此页面未找到图片', selectImagesToSave: '选择要保存的图片',
selectedCount: '已选择 {selected} / {total}', saveNToLibrary: '保存 {count} 个到素材库',
imageLabel: '图片 {index}', findOnPage: '在页面中定位', saving: '正在保存...', savingImages: '正在保存 {count} 张图片...',
busyStepOf: '第 {step}/{total} 步', busyAbout: '约 {sec} 秒', busyTakingLonger: '仍在处理，请耐心等待…',
busyPageSnapshot: '正在快照页面…', busyPageInline: '正在内联样式与图片…', busyPageSaving: '正在保存到素材库…',
busySystemReading: '正在读取页面样式…', busySystemExtract: '正在提取颜色、字体与组件…',
busySystemBuilding: '正在生成设计系统资源…', busySystemSaving: '正在保存到素材库…',
busyFigmaReading: '正在读取页面布局…', busyFigmaBuilding: '正在生成 Figma 导入 JSON…', busyFigmaPreparing: '正在准备下载…',
busyShotCapturing: '正在截图…', busyShotSaving: '正在保存到素材库…',
busyRegionCapturing: '正在捕获区域…', busyRegionSaving: '正在保存到素材库…',
busyElementCapturing: '正在捕获元素…', busyElementSaving: '正在保存到素材库…',
busyImagesDownloading: '正在下载 {count} 张图片…', busyImagesSaving: '正在保存到素材库…',
savedImagesCount: '已保存 {count}/{total} 张图片到素材库', regionTooSmall: '区域太小，请拖选更大的框',
regionCancelled: '已取消区域截图', dragToSelectRegion: '拖动', dragToSelectRegionTail: '选择区域',
regionAlreadyInLibrary: '区域已在素材库中', regionSaved: '区域已保存到素材库',
saveImageToLibrary: '保存图片到 Open Design 素材库', saveImageToOpenDesign: '保存图片到 Open Design',
savingImage: '正在保存图片...', imageSaved: '图片已保存到素材库', imageSaveFailed: '无法保存该图片',
errorCaptureTooLarge: '捕获内容过大，请在高级设置中取消“内联图片”后重试', errorDesignSystemCaptureFailed: '设计系统捕获失败',
brandFallbackTitle: '捕获的品牌', brandFallbackDescription: '从实时网页中程序化提取。',
brandPageTitleSuffix: '设计系统捕获', brandFileTitle: '{title} 设计系统', brandExtracted: '提取的设计系统',
brandAssetMap: '品牌资产地图', brandAssetMapSub: '6 组提取结果', brandLogo: '标志', brandImages: '图片',
brandTypography: '字体', brandPalette: '色板', brandVoice: '语气', brandComponents: '组件',
brandLogoCount: '{count} 个标志和应用图标', brandImageCount: '{count} 张代表图片',
brandFontCount: '{count} 个字体族', brandColorCount: '{count} 个观察到的颜色',
brandHeadingCount: '{count} 个标题样本', brandComponentSummary: '按钮、表单、卡片和导航',
brandIdentity: '身份', brandLogoSub: '品牌标志', brandTypographySub: '实时计算样式',
brandPaletteSub: '浅色和深色令牌', brandComponentKit: '组件套件', brandComponentKitSub: '用页面令牌填充的模板',
brandImagesSub: '代表性资产', brandVoiceContent: '语气与内容', brandVoiceContentSub: '检测到的标题',
brandNoImages: '未检测到大尺寸页面图片。', brandObservedColor: '观察到的颜色', brandNoHeading: '没有可用标题样本。',
brandKeywordFallback: '捕获的品牌', brandAssetAlt: '品牌资产', brandLogoAsset: '标志资产',
brandImageAlt: '品牌图片 {index}', brandImageLabel: '图片 {index}', brandTheme: '主题',
brandLight: '浅色', brandDark: '深色', brandPrimaryAction: '主要操作', brandSecondaryAction: '次要操作',
brandFormField: '表单字段', brandFormFieldSample: '表单字段示例', brandSurfaceCard: '表面卡片',
brandSurfaceCardText: '圆角、边框、颜色和字体继承自提取的设计系统。', brandNavigationItem: '导航项',
brandDataNote: '此文件在 <code>#od-design-system-data</code> 中包含结构化 JSON，供后续自动化使用。',
swatchBackground: '背景', swatchSurface: '表面', swatchForeground: '前景', swatchMuted: '弱化',
swatchBorder: '边框', swatchAccent: '强调', swatchSupport: '辅助', swatchHighlight: '高亮', swatchColor: '颜色 {index}',
},
'zh-TW': {
extensionName: 'Open Design 網頁剪藏',
extensionDescription: '將網頁、設計系統、截圖、圖片和 Figma 匯入 JSON 剪藏到 Open Design 素材庫。',
webClipper: '網頁剪藏', statusConnected: '已連線', statusOffline: '離線',
capturePageTitle: '擷取頁面', capturePageSub: '高保真快照 -> 素材庫',
screenshot: '截圖', region: '區域', pickImages: '選擇圖片', pickElement: '選擇元素',
extractDesignSystem: '提取設計系統', advanced: '進階', inlineImages: '內嵌圖片',
onPageBar: '頁面浮條', imageHoverButton: '圖片懸浮按鈕', save: '儲存', refreshPage: '重新整理頁面',
extractingDesignSystem: '正在提取設計系統...', designSystemSaved: '設計系統已儲存到素材庫{suffix}。',
toolbarExtractDesignSystem: '提取設計系統', savedDesignSystemShort: '已儲存設計系統',
brandExtracted: '提取的設計系統', brandPageTitleSuffix: '設計系統擷取', brandAssetMap: '設計系統資產地圖',
brandIdentity: '識別', brandLogo: '標誌', brandImages: '圖片', brandTypography: '字體',
brandPalette: '色板', brandVoice: '語氣', brandComponents: '元件', brandComponentKit: '元件套件',
brandLight: '淺色', brandDark: '深色',
busyStepOf: '第 {step}/{total} 步', busyAbout: '約 {sec} 秒', busyTakingLonger: '仍在處理，請耐心等候…',
busyPageSnapshot: '正在快照頁面…', busyPageInline: '正在內聯樣式與圖片…', busyPageSaving: '正在儲存到素材庫…',
busySystemReading: '正在讀取頁面樣式…', busySystemExtract: '正在提取顏色、字體與元件…',
busySystemBuilding: '正在產生設計系統資源…', busySystemSaving: '正在儲存到素材庫…',
busyFigmaReading: '正在讀取頁面佈局…', busyFigmaBuilding: '正在產生 Figma 匯入 JSON…', busyFigmaPreparing: '正在準備下載…',
busyShotCapturing: '正在截圖…', busyShotSaving: '正在儲存到素材庫…',
busyRegionCapturing: '正在擷取區域…', busyRegionSaving: '正在儲存到素材庫…',
busyElementCapturing: '正在擷取元素…', busyElementSaving: '正在儲存到素材庫…',
busyImagesDownloading: '正在下載 {count} 張圖片…', busyImagesSaving: '正在儲存到素材庫…',
},
'pt-BR': {
extensionDescription: 'Capture páginas, kits de marca, screenshots, imagens e JSON de importação do Figma na sua Library Open Design.',
statusConnected: 'Conectado', statusOffline: 'Offline', capturePageTitle: 'Capturar página',
screenshot: 'Screenshot', region: 'Região', pickImages: 'Escolher imagens', pickElement: 'Escolher elemento',
extractDesignSystem: 'Extrair sistema de design', advanced: 'Avançado', inlineImages: 'Incorporar imagens',
onPageBar: 'Barra na página', save: 'Salvar', refreshPage: 'Recarregar página',
toolbarExtractDesignSystem: 'Extrair sistema de design', savedDesignSystemShort: 'Sistema de design salvo',
brandExtracted: 'Sistema de design extraído', brandPageTitleSuffix: 'Captura de Sistema de Design',
brandAssetMap: 'Mapa de ativos do sistema de design', brandIdentity: 'Identidade', brandLogo: 'Logo',
brandImages: 'Imagens', brandTypography: 'Tipografia', brandPalette: 'Paleta', brandVoice: 'Voz',
brandComponents: 'Componentes', brandComponentKit: 'Kit de componentes',
},
'es-ES': {
extensionDescription: 'Guarda páginas, kits de marca, capturas, imágenes y JSON de importación de Figma en tu Library de Open Design.',
statusConnected: 'Conectado', statusOffline: 'Sin conexión', capturePageTitle: 'Capturar página',
screenshot: 'Captura', region: 'Región', pickImages: 'Elegir imágenes', pickElement: 'Elegir elemento',
extractDesignSystem: 'Extraer sistema de diseño', advanced: 'Avanzado', inlineImages: 'Incrustar imágenes',
onPageBar: 'Barra en página', save: 'Guardar', refreshPage: 'Recargar página',
toolbarExtractDesignSystem: 'Extraer sistema de diseño', savedDesignSystemShort: 'Sistema de diseño guardado',
brandExtracted: 'Sistema de diseño extraído', brandPageTitleSuffix: 'Captura de Sistema de Diseño',
brandAssetMap: 'Mapa de activos del sistema de diseño', brandIdentity: 'Identidad', brandLogo: 'Logo',
brandImages: 'Imágenes', brandTypography: 'Tipografía', brandPalette: 'Paleta', brandVoice: 'Voz',
brandComponents: 'Componentes', brandComponentKit: 'Kit de componentes',
},
ru: {
extensionDescription: 'Сохраняйте страницы, дизайн-системы, скриншоты, изображения и Figma import JSON в библиотеку Open Design.',
statusConnected: 'Подключено', statusOffline: 'Офлайн', capturePageTitle: 'Захватить страницу',
screenshot: 'Скриншот', region: 'Область', pickImages: 'Выбрать изображения', pickElement: 'Выбрать элемент',
extractDesignSystem: 'Извлечь дизайн-систему', advanced: 'Дополнительно', inlineImages: 'Встроить изображения',
onPageBar: 'Панель на странице', save: 'Сохранить', refreshPage: 'Обновить страницу',
toolbarExtractDesignSystem: 'Извлечь дизайн-систему', savedDesignSystemShort: 'Дизайн-система сохранена',
brandExtracted: 'Извлеченная дизайн-система', brandPageTitleSuffix: 'Захват дизайн-системы',
brandAssetMap: 'Карта активов дизайн-системы', brandIdentity: 'Идентичность', brandLogo: 'Логотип',
brandImages: 'Изображения', brandTypography: 'Типографика', brandPalette: 'Палитра', brandVoice: 'Тон',
brandComponents: 'Компоненты', brandComponentKit: 'Набор компонентов',
},
fa: {
extensionDescription: 'صفحه‌ها، سیستم‌های طراحی، اسکرین‌شات‌ها، تصاویر و JSON واردسازی Figma را در کتابخانه Open Design ذخیره کنید.',
statusConnected: 'متصل', statusOffline: 'آفلاین', capturePageTitle: 'گرفتن صفحه',
screenshot: 'اسکرین‌شات', region: 'ناحیه', pickImages: 'انتخاب تصاویر', pickElement: 'انتخاب المان',
extractDesignSystem: 'استخراج سیستم طراحی', advanced: 'پیشرفته', inlineImages: 'درون‌گذاری تصاویر',
onPageBar: 'نوار روی صفحه', save: 'ذخیره', refreshPage: 'بازخوانی صفحه',
toolbarExtractDesignSystem: 'استخراج سیستم طراحی', savedDesignSystemShort: 'سیستم طراحی ذخیره شد',
brandExtracted: 'سیستم طراحی استخراج‌شده', brandPageTitleSuffix: 'برداشت سیستم طراحی',
brandAssetMap: 'نقشه دارایی سیستم طراحی', brandIdentity: 'هویت', brandLogo: 'لوگو',
brandImages: 'تصاویر', brandTypography: 'تایپوگرافی', brandPalette: 'پالت', brandVoice: 'لحن',
brandComponents: 'کامپوننت‌ها', brandComponentKit: 'کیت کامپوننت',
},
ar: {
extensionDescription: 'احفظ الصفحات وأنظمة التصميم ولقطات الشاشة والصور وملف Figma JSON في مكتبة Open Design.',
statusConnected: 'متصل', statusOffline: 'غير متصل', capturePageTitle: 'التقاط الصفحة',
screenshot: 'لقطة شاشة', region: 'منطقة', pickImages: 'اختر الصور', pickElement: 'اختر عنصرا',
extractDesignSystem: 'استخراج نظام التصميم', advanced: 'متقدم', inlineImages: 'تضمين الصور',
onPageBar: 'شريط الصفحة', save: 'حفظ', refreshPage: 'تحديث الصفحة',
toolbarExtractDesignSystem: 'استخراج نظام التصميم', savedDesignSystemShort: 'تم حفظ نظام التصميم',
brandExtracted: 'نظام تصميم مستخرج', brandPageTitleSuffix: 'التقاط نظام التصميم',
brandAssetMap: 'خريطة أصول نظام التصميم', brandIdentity: 'الهوية', brandLogo: 'الشعار',
brandImages: 'الصور', brandTypography: 'الخطوط', brandPalette: 'الألوان', brandVoice: 'النبرة',
brandComponents: 'المكونات', brandComponentKit: 'عدة المكونات',
},
ja: {
extensionDescription: 'ページ、デザインシステム、スクリーンショット、画像、Figma インポート JSON を Open Design Library に保存します。',
webClipper: 'Web クリッパー', statusConnected: '接続済み', statusOffline: 'オフライン',
capturePageTitle: 'ページを取得', capturePageSub: '高忠実度スナップショット -> Library',
screenshot: 'スクリーンショット', region: '範囲', pickImages: '画像を選択', pickElement: '要素を選択',
extractDesignSystem: 'デザインシステムを抽出', advanced: '詳細', inlineImages: '画像を埋め込む',
onPageBar: 'ページ上バー', imageHoverButton: '画像ホバーボタン', save: '保存', refreshPage: 'ページを再読み込み',
extractingDesignSystem: 'デザインシステムを抽出中...', designSystemSaved: 'デザインシステムを Library に保存しました{suffix}。',
toolbarExtractDesignSystem: 'デザインシステムを抽出', savedDesignSystemShort: 'デザインシステムを保存',
brandExtracted: '抽出したデザインシステム', brandPageTitleSuffix: 'デザインシステム取得',
brandAssetMap: 'ブランドアセットマップ', brandIdentity: 'アイデンティティ', brandLogo: 'ロゴ',
brandImages: '画像', brandTypography: 'タイポグラフィ', brandPalette: 'パレット', brandVoice: 'トーン',
brandComponents: 'コンポーネント', brandComponentKit: 'コンポーネントキット',
},
ko: {
extensionDescription: '페이지, 디자인 시스템, 스크린샷, 이미지, Figma 가져오기 JSON을 Open Design Library에 저장합니다.',
statusConnected: '연결됨', statusOffline: '오프라인', capturePageTitle: '페이지 캡처',
screenshot: '스크린샷', region: '영역', pickImages: '이미지 선택', pickElement: '요소 선택',
extractDesignSystem: '디자인 시스템 추출', advanced: '고급', inlineImages: '이미지 포함',
onPageBar: '페이지 바', save: '저장', refreshPage: '페이지 새로고침',
toolbarExtractDesignSystem: '디자인 시스템 추출', savedDesignSystemShort: '디자인 시스템 저장됨',
brandExtracted: '추출된 디자인 시스템', brandPageTitleSuffix: '디자인 시스템 캡처',
brandAssetMap: '디자인 시스템 에셋 맵', brandIdentity: '아이덴티티', brandLogo: '로고',
brandImages: '이미지', brandTypography: '타이포그래피', brandPalette: '팔레트', brandVoice: '보이스',
brandComponents: '컴포넌트', brandComponentKit: '컴포넌트 키트',
},
pl: {
extensionDescription: 'Zapisuj strony, systemy projektowe, zrzuty ekranu, obrazy i JSON importu Figma w bibliotece Open Design.',
statusConnected: 'Połączono', statusOffline: 'Offline', capturePageTitle: 'Przechwyć stronę',
screenshot: 'Zrzut ekranu', region: 'Region', pickImages: 'Wybierz obrazy', pickElement: 'Wybierz element',
extractDesignSystem: 'Wyodrębnij system projektowy', advanced: 'Zaawansowane', inlineImages: 'Osadź obrazy',
onPageBar: 'Pasek na stronie', save: 'Zapisz', refreshPage: 'Odśwież stronę',
toolbarExtractDesignSystem: 'Wyodrębnij system projektowy', savedDesignSystemShort: 'System projektowy zapisany',
brandExtracted: 'Wyodrębniony system projektowy', brandPageTitleSuffix: 'Przechwycenie systemu projektowego',
brandAssetMap: 'Mapa zasobów systemu projektowego', brandIdentity: 'Tożsamość', brandLogo: 'Logo',
brandImages: 'Obrazy', brandTypography: 'Typografia', brandPalette: 'Paleta', brandVoice: 'Głos',
brandComponents: 'Komponenty', brandComponentKit: 'Zestaw komponentów',
},
hu: {
extensionDescription: 'Oldalak, designrendszerek, képernyőképek, képek és Figma import JSON mentése az Open Design Librarybe.',
statusConnected: 'Csatlakozva', statusOffline: 'Offline', capturePageTitle: 'Oldal mentése',
screenshot: 'Képernyőkép', region: 'Terület', pickImages: 'Képek kiválasztása', pickElement: 'Elem kiválasztása',
extractDesignSystem: 'Designrendszer kinyerése', advanced: 'Speciális', inlineImages: 'Képek beágyazása',
onPageBar: 'Oldalsáv', save: 'Mentés', refreshPage: 'Oldal frissítése',
toolbarExtractDesignSystem: 'Designrendszer kinyerése', savedDesignSystemShort: 'Designrendszer mentve',
brandExtracted: 'Kinyert designrendszer', brandPageTitleSuffix: 'Designrendszer-rögzítés',
brandAssetMap: 'Designrendszer-eszköztérkép', brandIdentity: 'Identitás', brandLogo: 'Logó',
brandImages: 'Képek', brandTypography: 'Tipográfia', brandPalette: 'Paletta', brandVoice: 'Hang',
brandComponents: 'Komponensek', brandComponentKit: 'Komponenskészlet',
},
fr: {
extensionDescription: 'Capturez pages, systèmes de design, captures, images et JSON import Figma dans votre Library Open Design.',
statusConnected: 'Connecté', statusOffline: 'Hors ligne', capturePageTitle: 'Capturer la page',
screenshot: 'Capture', region: 'Zone', pickImages: 'Choisir images', pickElement: 'Choisir élément',
extractDesignSystem: 'Extraire le système de design', advanced: 'Avancé', inlineImages: 'Intégrer les images',
onPageBar: 'Barre de page', save: 'Enregistrer', refreshPage: 'Recharger la page',
toolbarExtractDesignSystem: 'Extraire le système de design', savedDesignSystemShort: 'Système de design enregistré',
brandExtracted: 'Système de design extrait', brandPageTitleSuffix: 'Capture du système de design',
brandAssetMap: 'Carte des actifs du système de design', brandIdentity: 'Identité', brandLogo: 'Logo',
brandImages: 'Images', brandTypography: 'Typographie', brandPalette: 'Palette', brandVoice: 'Voix',
brandComponents: 'Composants', brandComponentKit: 'Kit de composants',
},
uk: {
extensionDescription: 'Зберігайте сторінки, дизайн-системи, скриншоти, зображення та Figma import JSON у бібліотеку Open Design.',
statusConnected: 'Підключено', statusOffline: 'Офлайн', capturePageTitle: 'Захопити сторінку',
screenshot: 'Скриншот', region: 'Область', pickImages: 'Вибрати зображення', pickElement: 'Вибрати елемент',
extractDesignSystem: 'Витягти дизайн-систему', advanced: 'Додатково', inlineImages: 'Вбудувати зображення',
onPageBar: 'Панель сторінки', save: 'Зберегти', refreshPage: 'Оновити сторінку',
toolbarExtractDesignSystem: 'Витягти дизайн-систему', savedDesignSystemShort: 'Дизайн-систему збережено',
brandExtracted: 'Витягнута дизайн-система', brandPageTitleSuffix: 'Захоплення дизайн-системи',
brandAssetMap: 'Мапа активів дизайн-системи', brandIdentity: 'Ідентичність', brandLogo: 'Логотип',
brandImages: 'Зображення', brandTypography: 'Типографіка', brandPalette: 'Палітра', brandVoice: 'Голос',
brandComponents: 'Компоненти', brandComponentKit: 'Набір компонентів',
},
tr: {
extensionDescription: 'Sayfaları, tasarım sistemlerini, ekran görüntülerini, görselleri ve Figma içe aktarma JSONunu Open Design Libraryye kaydedin.',
statusConnected: 'Bağlandı', statusOffline: 'Çevrimdışı', capturePageTitle: 'Sayfayı yakala',
screenshot: 'Ekran görüntüsü', region: 'Bölge', pickImages: 'Görsel seç', pickElement: 'Öğe seç',
extractDesignSystem: 'Tasarım sistemini çıkar', advanced: 'Gelişmiş', inlineImages: 'Görselleri göm',
onPageBar: 'Sayfa çubuğu', save: 'Kaydet', refreshPage: 'Sayfayı yenile',
toolbarExtractDesignSystem: 'Tasarım sistemini çıkar', savedDesignSystemShort: 'Tasarım sistemi kaydedildi',
brandExtracted: 'Çıkarılan tasarım sistemi', brandPageTitleSuffix: 'Tasarım Sistemi Yakalama',
brandAssetMap: 'Tasarım sistemi varlık haritası', brandIdentity: 'Kimlik', brandLogo: 'Logo',
brandImages: 'Görseller', brandTypography: 'Tipografi', brandPalette: 'Palet', brandVoice: 'Ses',
brandComponents: 'Bileşenler', brandComponentKit: 'Bileşen kiti',
},
th: {
extensionDescription: 'บันทึกหน้าเว็บ ระบบดีไซน์ ภาพหน้าจอ รูปภาพ และ Figma import JSON ไปยัง Open Design Library',
statusConnected: 'เชื่อมต่อแล้ว', statusOffline: 'ออฟไลน์', capturePageTitle: 'จับภาพหน้า',
screenshot: 'ภาพหน้าจอ', region: 'พื้นที่', pickImages: 'เลือกรูปภาพ', pickElement: 'เลือกองค์ประกอบ',
extractDesignSystem: 'ดึงระบบดีไซน์', advanced: 'ขั้นสูง', inlineImages: 'ฝังรูปภาพ',
onPageBar: 'แถบบนหน้า', save: 'บันทึก', refreshPage: 'โหลดหน้าใหม่',
toolbarExtractDesignSystem: 'ดึงระบบดีไซน์', savedDesignSystemShort: 'บันทึกระบบดีไซน์แล้ว',
brandExtracted: 'ระบบดีไซน์ที่ดึงมา', brandPageTitleSuffix: 'การจับระบบดีไซน์',
brandAssetMap: 'แผนที่ทรัพยากรระบบดีไซน์', brandIdentity: 'อัตลักษณ์', brandLogo: 'โลโก้',
brandImages: 'รูปภาพ', brandTypography: 'ตัวอักษร', brandPalette: 'พาเลต', brandVoice: 'น้ำเสียง',
brandComponents: 'คอมโพเนนต์', brandComponentKit: 'ชุดคอมโพเนนต์',
},
it: {
extensionDescription: 'Salva pagine, design system, screenshot, immagini e JSON di importazione Figma nella Library Open Design.',
statusConnected: 'Connesso', statusOffline: 'Offline', capturePageTitle: 'Acquisisci pagina',
screenshot: 'Screenshot', region: 'Area', pickImages: 'Scegli immagini', pickElement: 'Scegli elemento',
extractDesignSystem: 'Estrai design system', advanced: 'Avanzate', inlineImages: 'Incorpora immagini',
onPageBar: 'Barra pagina', save: 'Salva', refreshPage: 'Ricarica pagina',
toolbarExtractDesignSystem: 'Estrai design system', savedDesignSystemShort: 'Design system salvato',
brandExtracted: 'Design system estratto', brandPageTitleSuffix: 'Acquisizione Design System',
brandAssetMap: 'Mappa asset del design system', brandIdentity: 'Identità', brandLogo: 'Logo',
brandImages: 'Immagini', brandTypography: 'Tipografia', brandPalette: 'Palette', brandVoice: 'Voce',
brandComponents: 'Componenti', brandComponentKit: 'Kit componenti',
},
vi: {
extensionDescription: 'Lưu trang, hệ thống thiết kế, ảnh chụp màn hình, hình ảnh và JSON nhập Figma vào Open Design Library.',
statusConnected: 'Đã kết nối', statusOffline: 'Ngoại tuyến', capturePageTitle: 'Chụp trang',
screenshot: 'Ảnh chụp màn hình', region: 'Vùng', pickImages: 'Chọn hình ảnh', pickElement: 'Chọn phần tử',
extractDesignSystem: 'Trích xuất hệ thống thiết kế', advanced: 'Nâng cao', inlineImages: 'Nhúng hình ảnh',
onPageBar: 'Thanh trên trang', save: 'Lưu', refreshPage: 'Tải lại trang',
toolbarExtractDesignSystem: 'Trích xuất hệ thống thiết kế', savedDesignSystemShort: 'Đã lưu hệ thống thiết kế',
brandExtracted: 'Hệ thống thiết kế đã trích xuất', brandPageTitleSuffix: 'Chụp Hệ Thống Thiết Kế',
brandAssetMap: 'Bản đồ tài sản hệ thống thiết kế', brandIdentity: 'Nhận diện', brandLogo: 'Logo',
brandImages: 'Hình ảnh', brandTypography: 'Kiểu chữ', brandPalette: 'Bảng màu', brandVoice: 'Giọng điệu',
brandComponents: 'Thành phần', brandComponentKit: 'Bộ thành phần',
},
nl: {
extensionDescription: 'Sla pagina’s, designsystemen, screenshots, afbeeldingen en Figma-import-JSON op in je Open Design Library.',
statusConnected: 'Verbonden', statusOffline: 'Offline', capturePageTitle: 'Pagina vastleggen',
screenshot: 'Screenshot', region: 'Gebied', pickImages: 'Afbeeldingen kiezen', pickElement: 'Element kiezen',
extractDesignSystem: 'Designsysteem extraheren', advanced: 'Geavanceerd', inlineImages: 'Afbeeldingen insluiten',
onPageBar: 'Paginabalk', save: 'Opslaan', refreshPage: 'Pagina herladen',
toolbarExtractDesignSystem: 'Designsysteem extraheren', savedDesignSystemShort: 'Designsysteem opgeslagen',
brandExtracted: 'Geëxtraheerd designsysteem', brandPageTitleSuffix: 'Designsysteem-vastlegging',
brandAssetMap: 'Kaart met designsysteem-assets', brandIdentity: 'Identiteit', brandLogo: 'Logo',
brandImages: 'Afbeeldingen', brandTypography: 'Typografie', brandPalette: 'Palet', brandVoice: 'Stem',
brandComponents: 'Componenten', brandComponentKit: 'Componentkit',
},
};
const dicts = {};
for (const locale of LOCALES) dicts[locale] = { ...en, ...(overrides[locale] || {}) };
function normalizeLocale(raw) {
const value = String(raw || '').trim().replace(/_/g, '-');
if (!value) return '';
const lower = value.toLowerCase();
const exact = LOCALES.find((locale) => locale.toLowerCase() === lower);
if (exact) return exact;
const [language, regionOrScript] = lower.split('-');
if (language === 'zh') {
if (['hant', 'tw', 'hk', 'mo'].includes(regionOrScript)) return 'zh-TW';
return 'zh-CN';
}
if (language === 'pt') return 'pt-BR';
if (language === 'es') return 'es-ES';
return LOCALES.find((locale) => locale.toLowerCase().split('-')[0] === language) || '';
}
function resolveLocale(languages) {
for (const raw of languages || []) {
const locale = normalizeLocale(raw);
if (locale) return locale;
}
return 'en';
}
function browserLanguages() {
const values = [];
try {
if (typeof chrome !== 'undefined' && chrome.i18n && typeof chrome.i18n.getUILanguage === 'function') {
values.push(chrome.i18n.getUILanguage());
}
} catch {
// ignore
}
try {
if (typeof navigator !== 'undefined') {
if (navigator.languages) values.push(...navigator.languages);
if (navigator.language) values.push(navigator.language);
}
} catch {
// ignore
}
return values;
}
function currentLocale() {
return resolveLocale(browserLanguages());
}
function interpolate(raw, vars) {
if (!vars) return raw;
return raw.replace(/\{(\w+)\}/g, (_, name) => (vars[name] == null ? `{${name}}` : String(vars[name])));
}
function t(key, vars, locale) {
const resolved = normalizeLocale(locale) || currentLocale();
const dict = dicts[resolved] || en;
return interpolate(dict[key] || en[key] || key, vars);
}
function isRtl(locale) {
return RTL.has(normalizeLocale(locale) || currentLocale());
}
function htmlLang(locale) {
return normalizeLocale(locale) || currentLocale();
}
function translateDocument(root, locale) {
const doc = root || (typeof document !== 'undefined' ? document : null);
if (!doc) return;
const resolved = htmlLang(locale);
const documentElement = doc.documentElement || doc.querySelector?.('html');
if (documentElement) {
documentElement.setAttribute('lang', resolved);
documentElement.setAttribute('dir', isRtl(resolved) ? 'rtl' : 'ltr');
}
doc.querySelectorAll('[data-i18n]').forEach((el) => {
el.textContent = t(el.getAttribute('data-i18n'), undefined, resolved);
});
doc.querySelectorAll('[data-i18n-html]').forEach((el) => {
el.innerHTML = t(el.getAttribute('data-i18n-html'), undefined, resolved);
});
doc.querySelectorAll('[data-i18n-title]').forEach((el) => {
el.setAttribute('title', t(el.getAttribute('data-i18n-title'), undefined, resolved));
});
doc.querySelectorAll('[data-i18n-placeholder]').forEach((el) => {
el.setAttribute('placeholder', t(el.getAttribute('data-i18n-placeholder'), undefined, resolved));
});
doc.querySelectorAll('[data-i18n-aria-label]').forEach((el) => {
el.setAttribute('aria-label', t(el.getAttribute('data-i18n-aria-label'), undefined, resolved));
});
const title = doc.querySelector('title[data-i18n]');
if (title) title.textContent = t(title.getAttribute('data-i18n'), undefined, resolved);
}
const api = {
LOCALES,
dictionaries: dicts,
normalizeLocale,
resolveLocale,
currentLocale,
htmlLang,
isRtl,
t,
translateDocument,
};
globalThis.OD_CLIPPER_I18N = api;
})();
Reference in New Issue View Git Blame Copy Permalink