design_sources.hpp

Go to the documentation of this file.

#pragma once

 
#include <pulp/view/design_ir.hpp>
#include <pulp/view/design_ir_io.hpp>
#include <pulp/view/design_source_types.hpp>
#include <cstdint>
#include <map>
#include <memory>
#include <string>
#include <string_view>
#include <optional>
#include <vector>
#include <unordered_map>
 
namespace pulp::view {
 
// ── Design source helpers ───────────────────────────────────────────────
//
// The DesignSource enum itself lives in design_ir.hpp (DesignIR::source uses
// it by value). These string<->enum helpers live with the source adapters.

std::optional<DesignSource> parse_design_source(const std::string& name);

const char* design_source_name(DesignSource source);

SnapshotDynamicApiScan detect_jsx_snapshot_dynamic_apis(std::string_view source);
 
// ── Source adapters ─────────────────────────────────────────────────────

DesignIR parse_figma_json(const std::string& json);

DesignIR parse_figma_plugin_json(const std::string& json);

DesignIR parse_stitch_html(const std::string& html);

DesignIR parse_v0_tsx(const std::string& tsx);

DesignIR parse_pencil_json(const std::string& json);

DesignIR parse_claude_html(const std::string& html);
 
// ── DESIGN.md adapter (Google design.md, Apache-2.0) ─────────────────────
//
// DESIGN.md is a YAML-frontmatter + Markdown-body description of a design
// system. Unlike the other import sources, it does NOT describe a screen
// or a renderable artifact — it carries tokens and prose rationale. The
// parser populates IR token maps; the IR root node is left empty (no
// children, type "frame"). It deliberately does NOT scaffold a
// placeholder UI tree; that would imply scaffold quality Pulp cannot yet
// deliver. Spec: https://github.com/google-labs-code/design.md
//
// Diagnostics use a structured shape so the CLI can emit them as JSON
// with line/column info supplied by yaml-cpp.

DesignMdParseResult parse_designmd(const std::string& markdown);

DesignIR parse_designmd_yaml(const std::string& markdown);
 
// ── Lint, diff, and Tailwind export ─────────────────────────────────────
//
// These surfaces let DESIGN.md slot into CI gates the same way
// @google/design.md's TypeScript CLI does, without taking on its JS
// dependency surface. The lint rule set tracks the format rules Pulp consumes,
// including DESIGN.md 0.4 omitted-section and token-schema validation.

std::vector<DesignMdDiagnostic> lint_designmd(const DesignMdParseResult& parsed);

DesignMdDiffResult diff_designmd(const DesignMdParseResult& before,
                                  const DesignMdParseResult& after);

std::string export_tailwind_v3_json(const DesignMdParseResult& parsed);

std::string export_tailwind_v4_css(const DesignMdParseResult& parsed);
 
// ── Claude Design bundle envelope (pulp #468) ───────────────────────────
//
// Claude Design's "standalone HTML" export is a small loader shell
// wrapping a JSON envelope of base64-gzip-compressed assets. The loader
// JS unpacks the envelope at runtime and replaces `document.documentElement.innerHTML`
// with the unwrapped template HTML, then injects the bundled scripts.
//
// For the native-runtime import lane (`--execute-bundle`), Pulp needs to
// reproduce that unpack step in C++ before handing the result to the JS
// engine. This function performs only the unpack — running the result is
// `parse_claude_html_with_runtime`'s job.

std::optional<ClaudeBundle> parse_claude_bundle(const std::string& html);

std::optional<ClaudeBundle> parse_materialized_browser_document(
    const std::string& json);

std::shared_ptr<const ClaudeBundle> parse_materialized_browser_document_shared(
    const std::string& json);
 
MaterializedDocumentCacheStats materialized_document_cache_stats();
void clear_materialized_document_cache();

std::vector<std::string> runtime_import_whole_scripts(const ClaudeBundle& bundle);

std::optional<ClaudeBundle> parse_v0_dev_react(const std::string& tsx_or_envelope);

std::optional<ClaudeBundle> parse_figma_make_react(const std::string& tsx);

std::optional<ClaudeBundle> parse_stitch_react(const std::string& tsx);

std::optional<ClaudeBundle> parse_react_native_export(const std::string& tsx);

std::optional<ClaudeBundle> parse_pencil_react(const std::string& tsx);

std::optional<ClaudeBundle> parse_jsx_react(const std::string& bundle_js,
                                            const std::string& component_name = "JsxComponent");

std::string synthesize_runtime_envelope(const ClaudeBundle& bundle);

DesignIR parse_claude_html_with_runtime(const std::string& html,
                                        ClaudeRuntimeOptions opts = {});
 
// ── Claude Design classname extraction (pulp #1035) ─────────────────────
//
// Spectr's `tools/extract-html-bundle/extract.mjs` walks every `<style>`
// block in a Claude Design export and emits a `classnames.json` mapping
// of `classname → { cssProp: cssValue, ... }` (camelCase keys, raw
// values). The downstream `@pulp/css-adapt` layer consumes that map to
// merge class-based styles into inline before forwarding to bridge
// calls. Pulp's `pulp import-design --from claude` bakes that pass into
// the import pipeline so plugin authors get the same artifact without
// having to run a separate Node-side script.
//
// Result type (ClaudeClassNameRules, design_source_types.hpp): outer map keyed by classname (no leading dot), inner map
// keyed by CSS property in camelCase (e.g. `font-family` → `fontFamily`).
// Multiple `<style>` blocks in document order are merged; later blocks
// override earlier ones for the same classname (mirrors browser
// cascading order). `.scheme-*` rules are skipped — those are already
// handled as theme-mode token overrides upstream.

ClaudeClassNameRules extract_claude_classnames(const std::string& html);

std::string serialize_claude_classnames(const ClaudeClassNameRules& rules);
 
} // namespace pulp::view