design_system.hpp

Go to the documentation of this file.

#pragma once
 
// pulp::design — the "Ink & Signal" design system, ingested into Pulp code so
// the components a designer sees in the Figma library are directly usable when
// building a real UI (a sampler, an effect, an app). This is the umbrella
// include + the queryable component catalog.
//
// Two things live here:
//   1. The catalog API — pull in <pulp/design/design_system.hpp> for the
//      component metadata and one-call theme helper. Audio widget declarations
//      are supplied by <pulp/view/audio_widgets.hpp> when Pulp::view-audio is
//      linked; keeping them out of this core header lets the extracted view
//      layer remain audio-free.
//   2. The component CATALOG — rich, queryable metadata bridging each Figma
//      component to its native C++ class: category, native class, source header,
//      Figma component-set name, a one-line usage note, and the theme tokens it
//      restyles through. The catalog is what lets tooling (design-import,
//      JS/React bindings, docs) reason about the system without hardcoding it.
//
// The reskin contract still holds: every cataloged widget paints through
// View::resolve_color, so applying a different theme restyles all of them with
// no code change (see docs/guides/design-tokens.md).
 
#include <pulp/view/theme.hpp>
#include <pulp/view/view.hpp>
 
// Generic component surface. Audio components are included by the audio target
// through pulp/view/audio_widgets.hpp, not by this view-core header.
#include <pulp/view/buttons.hpp>
#include <pulp/view/gap_widgets.hpp>
#include <pulp/view/widgets.hpp>
#include <pulp/view/ui_components.hpp>
#include <pulp/view/scroll_bar.hpp>
#include <pulp/view/tree_view.hpp>
#include <pulp/view/table.hpp>
#include <pulp/view/toolbar.hpp>
#include <pulp/view/side_panel.hpp>
#include <pulp/view/breadcrumb.hpp>
#include <pulp/view/context_menu.hpp>
#include <pulp/view/channel_strip_view.hpp>
#include <pulp/view/range_slider_view.hpp>
#include <pulp/view/inline_value_editor_view.hpp>
#include <pulp/view/property_panel_view.hpp>
#include <pulp/view/group_box_view.hpp>
#include <pulp/view/number_box_states_view.hpp>
#include <pulp/view/knob_modulation_view.hpp>
#include <pulp/view/text_editor.hpp>
 
#include <string>
#include <string_view>
#include <vector>
 
namespace pulp::design {
 
// ── Theme helpers ───────────────────────────────────────────────────────────

pulp::view::Theme ink_signal_theme(bool dark = true);

void apply_ink_signal(pulp::view::View& root, bool dark = true);
 
// ── Component catalog ─────────────────────────────────────────────────────────

inline constexpr std::string_view kFigmaFileKey = "q9iDYZzg86YrOQKr6I3bY0";

enum class Category {
    controls,    // knobs, faders, sliders, steppers, pan
    inputs,      // text fields, combo boxes, toggles, checkboxes
    indicators,  // meters, progress, spinners, badges
    navigation,  // tabs, toolbars, breadcrumbs, sidebars, trees
    containers,  // panels, channel strips, scroll views, tables
    overlays,    // popovers, dialogs, tooltips, context menus, toasts
    audio,       // waveform, spectrum, XY pad, MIDI keyboard
    feedback,    // banners, empty states
};
 
std::string_view category_name(Category c);

struct ComponentInfo {
    std::string name;             // Display + catalog key, matches Figma set name ("Knob")
    Category category;
    std::string native_class;     // Fully-qualified C++ class ("pulp::view::Knob")
    std::string header;           // Include needed to use it ("pulp/view/widgets.hpp")
    std::string figma_component;  // Figma component-set / page name in kFigmaFileKey
    std::string usage;            // One-line "what it's for"
    std::vector<std::string> reskin_tokens;  // Theme tokens it paints through
};

const std::vector<ComponentInfo>& catalog();

const ComponentInfo* find(std::string_view name);

std::vector<const ComponentInfo*> in_category(Category c);
 
}  // namespace pulp::design