@getvitops/generator 0.1.0

package/assets/bricks/elements/split-link.php

@@ -0,0 +1,170 @@
+<?php
+/**
+ * Vitops — Split Link element (Bricks Builder).
+ *
+ * A "split button": a primary <a> flush with a <button> that toggles an anchored
+ * [popover] holding secondary, nestable content. Pure native platform — the toggle
+ * is a Popover API invoker (`popovertarget`, which the browser also wires to
+ * `aria-expanded`/`aria-details` for free), and the panel is placed with CSS Anchor
+ * Positioning. No Lit component; the framework's split-link.css does the styling.
+ *
+ * Placement is authored via the "Placement" control, which writes a `position-area`
+ * value (logical keywords) to `--split-link-area` on the root; it inherits down to
+ * the panel. Each instance gets a unique anchor-name derived from the element id.
+ *
+ * Nestable: the popover's children are authored in the canvas. A live [popover] is
+ * display:none, so in the builder the panel renders WITHOUT the `popover` attribute
+ * (as `.split-link__panel--editing`) to stay visible and droppable; on the frontend
+ * it is a real top-layer popover.
+ *
+ * Owned by the framework repo (vitops: bricks/elements/); copied into the theme's
+ * dist/bricks/ on build — do not hand-edit in the theme.
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Vitops_Element_Split_Link extends \Bricks\Element {
+	public $category      = 'vitops';
+	public $name          = 'vitops-split-link';
+	public $icon          = 'ti-direction-alt';
+	public $css_selector  = '.split-link';
+	public $nestable      = true;
+	public $vue_component = 'bricks-nestable';
+
+	public function get_label() {
+		return esc_html__( 'Split Link', 'bricks' );
+	}
+
+	public function get_keywords() {
+		return array( 'split', 'link', 'button', 'popover', 'dropdown', 'menu', 'vitops' );
+	}
+
+	public function set_controls() {
+		$this->controls['linkText'] = array(
+			'tab'         => 'content',
+			'label'       => esc_html__( 'Link text', 'bricks' ),
+			'type'        => 'text',
+			'default'     => esc_html__( 'View', 'bricks' ),
+		);
+
+		$this->controls['link'] = array(
+			'tab'   => 'content',
+			'label' => esc_html__( 'Link', 'bricks' ),
+			'type'  => 'link',
+		);
+
+		$this->controls['toggleLabel'] = array(
+			'tab'         => 'content',
+			'label'       => esc_html__( 'Toggle label (accessible name)', 'bricks' ),
+			'type'        => 'text',
+			'placeholder' => esc_html__( 'More options', 'bricks' ),
+			'description' => esc_html__( 'aria-label for the popover toggle button.', 'bricks' ),
+		);
+
+		$this->controls['caret'] = array(
+			'tab'         => 'content',
+			'label'       => esc_html__( 'Toggle glyph', 'bricks' ),
+			'type'        => 'text',
+			'placeholder' => '▾',
+			'description' => esc_html__( 'Character/HTML inside the toggle. It flips 180° while the panel is open.', 'bricks' ),
+		);
+
+		// Placement writes a position-area value (logical keywords) onto the root,
+		// where it inherits down to the panel. TODO: replace this select with a
+		// visual grid control — position-area is richer than a 3×3 grid (span-*
+		// keywords), so the picker must model spans, not just the 9 corners/edges.
+		$this->controls['placement'] = array(
+			'tab'     => 'content',
+			'label'   => esc_html__( 'Placement', 'bricks' ),
+			'type'    => 'select',
+			'inline'  => true,
+			'options' => array(
+				'block-start span-inline-end'   => esc_html__( 'Top · start-aligned', 'bricks' ),
+				'block-start center'            => esc_html__( 'Top · center', 'bricks' ),
+				'block-start span-inline-start' => esc_html__( 'Top · end-aligned', 'bricks' ),
+				'inline-start center'           => esc_html__( 'Inline-start (left)', 'bricks' ),
+				'center'                        => esc_html__( 'Center (over trigger)', 'bricks' ),
+				'inline-end center'             => esc_html__( 'Inline-end (right)', 'bricks' ),
+				'block-end span-inline-end'     => esc_html__( 'Bottom · start-aligned', 'bricks' ),
+				'block-end center'              => esc_html__( 'Bottom · center', 'bricks' ),
+				'block-end span-inline-start'   => esc_html__( 'Bottom · end-aligned', 'bricks' ),
+			),
+			'default' => 'block-end span-inline-end',
+			'css'     => array( array( 'property' => '--split-link-area', 'selector' => '' ) ),
+		);
+
+		$this->controls['gap'] = array(
+			'tab'         => 'content',
+			'label'       => esc_html__( 'Panel gap', 'bricks' ),
+			'type'        => 'number',
+			'units'       => true,
+			'placeholder' => '0.5rem',
+			'css'         => array( array( 'property' => '--split-link-gap', 'selector' => '' ) ),
+		);
+
+		$this->controls['_cssClasses']['default'] = 'split-link';
+	}
+
+	// Seed one block so authors have a target to drop popover content into.
+	public function get_nestable_children() {
+		return array(
+			array( 'name' => 'block', 'label' => esc_html__( 'Popover content', 'bricks' ) ),
+		);
+	}
+
+	// Builder canvas render() runs in the iframe; a live [popover] would be hidden
+	// there, so we reveal the panel while editing. Defensive: any true signal means
+	// builder; otherwise treat as frontend (the safe default — a false negative only
+	// makes the hidden content harder to reach via the canvas, not broken).
+	private function is_in_builder() {
+		foreach ( array( 'bricks_is_builder_iframe', 'bricks_is_builder_call', 'bricks_is_builder' ) as $fn ) {
+			if ( function_exists( $fn ) && $fn() ) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	public function render() {
+		$s      = $this->settings;
+		$id     = $this->id;
+		$pop_id = 'sl-' . $id;
+		$anchor = '--sl-' . $id;
+
+		// Unique anchor-name on the wrapper; the panel points at it (top-layer
+		// popovers can't be contained by a positioned ancestor).
+		$this->set_attribute( '_root', 'style', "anchor-name:{$anchor};" );
+
+		$link_text    = isset( $s['linkText'] ) && '' !== $s['linkText'] ? $s['linkText'] : esc_html__( 'View', 'bricks' );
+		$toggle_label = ! empty( $s['toggleLabel'] ) ? $s['toggleLabel'] : esc_html__( 'More options', 'bricks' );
+		$caret        = isset( $s['caret'] ) && '' !== $s['caret'] ? $s['caret'] : '&#9662;'; // ▾
+
+		// Primary link — Bricks resolves href/target/rel from the link control.
+		if ( ! empty( $s['link'] ) ) {
+			$this->set_link_attributes( '_link', $s['link'] );
+		}
+		$link_attrs = $this->render_attributes( '_link' );
+
+		// Builder: drop the `popover` attribute so nested content stays visible.
+		$editing      = $this->is_in_builder();
+		$panel_class  = 'split-link__panel' . ( $editing ? ' split-link__panel--editing' : '' );
+		$popover_attr = $editing ? '' : 'popover';
+
+		echo "<div {$this->render_attributes( '_root' )}>";
+
+		echo "<a class=\"split-link__link\" {$link_attrs}>" . esc_html( $link_text ) . '</a>';
+
+		echo '<button type="button" class="split-link__toggle" popovertarget="' . esc_attr( $pop_id ) . '"'
+			. ' aria-label="' . esc_attr( $toggle_label ) . '">'
+			. '<span class="split-link__caret" aria-hidden="true">' . $caret . '</span>'
+			. '</button>';
+
+		echo "<div id=\"{$pop_id}\" {$popover_attr} class=\"{$panel_class}\" style=\"position-anchor:{$anchor};\">";
+		echo \Bricks\Frontend::render_children( $this );
+		echo '</div>';
+
+		echo '</div>';
+	}
+}

package/assets/bricks/elements/split-panel.php

@@ -0,0 +1,155 @@
+<?php
+/**
+ * Vitops — Split Panel element (Bricks Builder).
+ *
+ * Renders the <wc-split-panel> Lit component (src/web-components/WCSplitPanel.ts): a
+ * resizable two-panel splitter with a draggable handle. Author fills the two seeded
+ * columns, which carry slot="start" / slot="end" so the component picks them up.
+ *
+ * Nestable: the live shadow-DOM handle appears on the frontend; the builder canvas
+ * shows the two columns stacked (upgrade happens client-side via dist/elements.js).
+ *
+ * Owned by the framework repo (vitops: bricks/elements/); copied into the theme's
+ * dist/bricks/ on build — do not hand-edit in the theme.
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Vitops_Element_Split_Panel extends \Bricks\Element {
+	public $category      = 'vitops';
+	public $name          = 'vitops-split-panel';
+	public $icon          = 'ti-layout-sidebar-2';
+	public $css_selector  = 'wc-split-panel';
+	public $nestable      = true;
+	public $vue_component = 'bricks-nestable';
+
+	public function get_label() {
+		return esc_html__( 'Split Panel', 'bricks' );
+	}
+
+	public function get_keywords() {
+		return array( 'split', 'panel', 'resize', 'splitter', 'drag', 'vitops' );
+	}
+
+	public function set_controls() {
+		$this->controls['position'] = array(
+			'tab'     => 'content',
+			'label'   => esc_html__( 'Initial position (%)', 'bricks' ),
+			'type'    => 'number',
+			'min'     => 0,
+			'max'     => 100,
+			'default' => 50,
+		);
+
+		$this->controls['vertical'] = array(
+			'tab'   => 'content',
+			'label' => esc_html__( 'Vertical (stack top/bottom)', 'bricks' ),
+			'type'  => 'checkbox',
+		);
+
+		$this->controls['discrete'] = array(
+			'tab'   => 'content',
+			'label' => esc_html__( 'Discrete (step) dragging', 'bricks' ),
+			'type'  => 'checkbox',
+		);
+
+		$this->controls['minSize'] = array(
+			'tab'     => 'content',
+			'label'   => esc_html__( 'Min panel size (px)', 'bricks' ),
+			'type'    => 'number',
+			'default' => 100,
+		);
+
+		$this->controls['maxSize'] = array(
+			'tab'   => 'content',
+			'label' => esc_html__( 'Max panel size (px)', 'bricks' ),
+			'type'  => 'number',
+		);
+
+		$this->controls['keyboardStep'] = array(
+			'tab'   => 'content',
+			'label' => esc_html__( 'Keyboard step (%)', 'bricks' ),
+			'type'  => 'number',
+		);
+
+		$this->controls['collapseThreshold'] = array(
+			'tab'   => 'content',
+			'label' => esc_html__( 'Collapse threshold (%)', 'bricks' ),
+			'type'  => 'number',
+		);
+
+		$this->controls['snapPoints'] = array(
+			'tab'         => 'content',
+			'label'       => esc_html__( 'Snap points (%)', 'bricks' ),
+			'type'        => 'text',
+			'placeholder' => '25,50,75',
+		);
+
+		$this->controls['snapDistance'] = array(
+			'tab'   => 'content',
+			'label' => esc_html__( 'Snap distance (%)', 'bricks' ),
+			'type'  => 'number',
+		);
+	}
+
+	// Two sides seeded, each tagged with the slot the component reads.
+	public function get_nestable_children() {
+		return array(
+			array(
+				'name'     => 'block',
+				'label'    => esc_html__( 'Start panel', 'bricks' ),
+				'settings' => array(
+					'_attributes' => array(
+						array( 'id' => 'vslotstart', 'name' => 'slot', 'value' => 'start' ),
+					),
+				),
+			),
+			array(
+				'name'     => 'block',
+				'label'    => esc_html__( 'End panel', 'bricks' ),
+				'settings' => array(
+					'_attributes' => array(
+						array( 'id' => 'vslotend', 'name' => 'slot', 'value' => 'end' ),
+					),
+				),
+			),
+		);
+	}
+
+	public function render() {
+		$s     = $this->settings;
+		$attrs = array();
+
+		// number/text attributes → kebab-case component attribute names.
+		$num = array(
+			'position'          => 'position',
+			'minSize'           => 'min-size',
+			'maxSize'           => 'max-size',
+			'keyboardStep'      => 'keyboard-step',
+			'collapseThreshold' => 'collapse-threshold',
+			'snapDistance'      => 'snap-distance',
+			'snapPoints'        => 'snap-points',
+		);
+		foreach ( $num as $key => $attr ) {
+			if ( isset( $s[ $key ] ) && '' !== $s[ $key ] ) {
+				$attrs[] = $attr . '="' . esc_attr( $s[ $key ] ) . '"';
+			}
+		}
+
+		// boolean attributes → present only when true.
+		if ( ! empty( $s['vertical'] ) ) {
+			$attrs[] = 'vertical';
+		}
+		if ( ! empty( $s['discrete'] ) ) {
+			$attrs[] = 'discrete';
+		}
+
+		$attr_str = implode( ' ', $attrs );
+
+		echo "<wc-split-panel {$attr_str} {$this->render_attributes( '_root' )}>";
+		echo \Bricks\Frontend::render_children( $this );
+		echo '</wc-split-panel>';
+	}
+}

package/assets/bricks/elements/split.php

@@ -0,0 +1,83 @@
+<?php
+/**
+ * Vitops — Split layout element (Bricks Builder).
+ *
+ * A nestable flex row rendering the framework's `.split` (src/css/layout.css) — equal
+ * columns by default. Set a ratio by adding a class in the CSS-classes field:
+ * `split-1-2` / `2-1` / `1-3` / `3-1` / `1-4` / `4-1` / `2-3` / `3-2`, each with an
+ * optional `-sm/-md/-lg/-xl` suffix to engage the ratio from a container breakpoint.
+ *
+ * The `.split` base rides on the built-in "CSS classes" setting (defaulted below) so it
+ * shows in the builder canvas (assembled from settings) and the frontend.
+ *
+ * Owned by the framework repo (vitops: bricks/elements/); copied into the theme's
+ * dist/bricks/ on build — do not hand-edit in the theme.
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Vitops_Element_Split extends \Bricks\Element {
+	public $category      = 'vitops';
+	public $name          = 'vitops-split';
+	public $icon          = 'ti-layout-column2';
+	public $css_selector  = '.split';
+	public $nestable      = true;
+	public $vue_component = 'bricks-nestable';
+
+	public function get_label() {
+		return esc_html__( 'Split', 'bricks' );
+	}
+
+	public function get_keywords() {
+		return [ 'split', 'columns', 'ratio', 'flex', 'container', 'layout', 'vitops' ];
+	}
+
+	public function set_controls() {
+		$this->controls['tag'] = [
+			'tab'       => 'content',
+			'label'     => esc_html__( 'HTML tag', 'bricks' ),
+			'type'      => 'select',
+			'inline'    => true,
+			'options'   => [
+				'div'     => 'div',
+				'section' => 'section',
+				'article' => 'article',
+				'aside'   => 'aside',
+				'main'    => 'main',
+				'header'  => 'header',
+				'footer'  => 'footer',
+				'nav'     => 'nav',
+			],
+			'default'   => 'div',
+			'lowercase' => true,
+		];
+
+		$this->controls['ratioInfo'] = [
+			'tab'     => 'content',
+			'type'    => 'info',
+			'content' => esc_html__( 'Equal columns by default. Add a class in "CSS classes" for a ratio: split-1-2, 2-1, 1-3, 3-1, 1-4, 4-1, 2-3, 3-2 (append -sm/-md/-lg/-xl to engage it from a breakpoint).', 'bricks' ),
+		];
+
+		// Base flex class, defaulted onto the built-in "CSS classes" setting so it
+		// shows in the builder canvas (assembled from settings) and the frontend.
+		$this->controls['_cssClasses']['default'] = 'split';
+	}
+
+	// Seed two empty columns — a split is inherently two sides. No opinionated
+	// classes; the author fills each column (and can make it a rhythm container).
+	public function get_nestable_children() {
+		return [
+			[ 'name' => 'block', 'label' => esc_html__( 'Column 1', 'bricks' ) ],
+			[ 'name' => 'block', 'label' => esc_html__( 'Column 2', 'bricks' ) ],
+		];
+	}
+
+	public function render() {
+		// $this->tag is resolved from the `tag` setting by the base (get_tag()).
+		echo "<{$this->tag} {$this->render_attributes( '_root' )}>";
+		echo \Bricks\Frontend::render_children( $this );
+		echo "</{$this->tag}>";
+	}
+}

package/assets/bricks/load.php

@@ -0,0 +1,129 @@
+<?php
+/**
+ * Vitops — Bricks theme bootstrap.
+ *
+ * One-line integration for the child theme. Add to the theme's functions.php:
+ *
+ *   require_once get_stylesheet_directory() . '/dist/bricks/load.php';
+ *
+ * It does three things:
+ *   1. Registers every repo-owned Bricks element under dist/bricks/elements/.
+ *   2. Enqueues the framework CSS + JS bundles — polyfills.js and elements.js as
+ *      ES modules (so the Lit custom elements upgrade), deferred.js with `defer`.
+ *      The enqueue runs on `wp_enqueue_scripts`, which the Bricks builder canvas
+ *      iframe also fires, so the elements upgrade while editing too.
+ *   3. Registers a "Vitops" builder category so the elements group together.
+ *
+ * Owned by the framework repo (vitops: bricks/); copied into the theme's
+ * dist/bricks/ on build — do not hand-edit in the theme.
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * 1. Register the custom Bricks elements.
+ *
+ * Bricks exposes `\Bricks\Elements::register_element( $file )`; each file defines
+ * a `Vitops_Element_*` class extending `\Bricks\Element`.
+ */
+add_action(
+	'init',
+	function () {
+		if ( ! class_exists( '\Bricks\Elements' ) ) {
+			return;
+		}
+
+		foreach ( glob( __DIR__ . '/elements/*.php' ) as $file ) {
+			\Bricks\Elements::register_element( $file );
+		}
+	},
+	11
+);
+
+/**
+ * 2. Enqueue the framework bundles. Handles listed in $module_handles are rewritten
+ *    to <script type="module"> below.
+ */
+add_action(
+	'wp_enqueue_scripts',
+	function () {
+		$dir  = get_stylesheet_directory_uri() . '/dist';
+		$path = get_stylesheet_directory() . '/dist';
+
+		// Version each asset by its file mtime so a deploy (which rewrites the file,
+		// preserving a fresh mtime through rsync) busts any browser/CDN cache. A `null`
+		// version leaves the URL query-less and highly cacheable, so post-deploy edits
+		// never reach returning visitors. Missing file → null (WP's default behaviour).
+		$ver = function ( $file ) use ( $path ) {
+			$p = $path . '/' . $file;
+			return file_exists( $p ) ? filemtime( $p ) : null;
+		};
+
+		wp_enqueue_style( 'vitops-styles', $dir . '/styles.min.css', array(), $ver( 'styles.min.css' ) );
+
+		// Feature-detected polyfill loader — first, high, as a module.
+		wp_enqueue_script( 'vitops-polyfills', $dir . '/polyfills.js', array(), $ver( 'polyfills.js' ), false );
+
+		// Custom-element registrations — module; self-registers on load.
+		wp_enqueue_script( 'vitops-elements', $dir . '/elements.js', array(), $ver( 'elements.js' ), true );
+
+		// Non-critical progressive enhancement — plain deferred script.
+		wp_enqueue_script( 'vitops-deferred', $dir . '/deferred.js', array(), $ver( 'deferred.js' ), true );
+	}
+);
+
+/**
+ * Rewrite the ES-module bundles to `type="module"` (WP has no first-class flag for
+ * this on classic enqueues). deferred.js stays a plain `defer` script.
+ */
+add_filter(
+	'script_loader_tag',
+	function ( $tag, $handle ) {
+		$module_handles = array( 'vitops-polyfills', 'vitops-elements' );
+
+		if ( in_array( $handle, $module_handles, true ) ) {
+			// Ensure a single type="module" attribute (replace any injected type).
+			$tag = preg_replace( '/\stype=(["\']).*?\1/', '', $tag );
+			$tag = str_replace( ' src=', ' type="module" src=', $tag );
+		}
+
+		return $tag;
+	},
+	10,
+	2
+);
+
+/**
+ * 3. Group the elements under a "Vitops" category, pinned to the TOP of the builder
+ *    panel. Bricks renders categories in array order, so prepend rather than append.
+ */
+add_filter(
+	'bricks/builder/element_categories',
+	function ( $categories ) {
+		// Drop any pre-existing key so the prepended one wins the ordering.
+		unset( $categories['vitops'] );
+
+		return array( 'vitops' => esc_html__( 'Vitops', 'bricks' ) ) + $categories;
+	},
+	5
+);
+
+/**
+ * 4. Default the design system to dark mode: stamp data-brx-theme="dark" on <html>.
+ *    The generated semantic colour roles (surface/brand-primary/success/…) remap under
+ *    `:root[data-brx-theme="dark"]`, and the site's pages are dark-themed, so this keeps
+ *    the framework's cards/badges/patterns consistent with the page. Server-side via
+ *    language_attributes so there is no light-mode flash on load.
+ */
+add_filter(
+	'language_attributes',
+	function ( $output ) {
+		// Bricks sets data-brx-theme from its default colour scheme (light); strip any
+		// existing value and force dark. High priority so this runs after Bricks.
+		$output = preg_replace( '/\s*data-brx-theme=(["\'][^"\']*["\']|\S+)/', '', (string) $output );
+		return rtrim( $output ) . ' data-brx-theme="dark"';
+	},
+	99
+);