@weasel-js/labkit 0.1.0

package/src/ui/properties/NumberRow.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { NumberRow } from './PropertyPanel';
+import { SideBySide } from './storyLayouts';
+
+const meta: Meta<typeof NumberRow> = {
+  title: 'labkit/UI/Properties/Rows/NumberRow',
+  component: NumberRow,
+};
+export default meta;
+type Story = StoryObj<typeof NumberRow>;
+
+function Controlled({
+  initial,
+  label,
+  min,
+  max,
+  step,
+  layout,
+}: {
+  initial: number;
+  label: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  layout?: 'block' | 'inline';
+}) {
+  const [value, setValue] = useState(initial);
+  return (
+    <NumberRow
+      label={label}
+      value={value}
+      onChange={setValue}
+      min={min}
+      max={max}
+      step={step}
+      layout={layout}
+    />
+  );
+}
+
+export const BothLayouts: Story = {
+  render: () => (
+    <SideBySide
+      block={<Controlled initial={8} label="Count" min={0} max={100} step={1} />}
+      inline={<Controlled initial={8} label="Count" min={0} max={100} step={1} layout="inline" />}
+    />
+  ),
+};
+
+export const Float: Story = {
+  render: () => (
+    <div style={{ width: 280 }}>
+      <Controlled initial={1.5} label="Factor" min={0} max={10} step={0.1} />
+    </div>
+  ),
+};
+
+export const Unbounded: Story = {
+  render: () => (
+    <div style={{ width: 280 }}>
+      <Controlled initial={0} label="Offset" />
+    </div>
+  ),
+};

package/src/ui/properties/PropertyGroup.less

@@ -0,0 +1,50 @@
+.lk-property-group {
+  grid-column: 1 / -1;
+  background: var(--lk-bg-sunken, rgba(0, 0, 0, 0.18));
+  border-radius: var(--lk-radius-md, 8px);
+  padding: 10px 12px 12px;
+}
+
+.lk-property-group__title {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 8px;
+  font-family: var(--lk-font-display);
+  font-weight: var(--lk-font-weight-light, 300);
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--lk-text-dim);
+}
+
+.lk-property-group__title hr {
+  border: 0;
+  border-top: 1px solid var(--lk-border);
+  margin: 0;
+}
+
+.lk-property-group__body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 16px;
+  row-gap: 10px;
+  // Stretch so paired rows match in height — slider rows then bottom-align
+  // their tracks (via `margin-top: auto`) and stay lined up even when one
+  // sibling's label wraps to two lines.
+  align-items: stretch;
+}
+
+.lk-property-group:not(.lk-property-group--pairs) .lk-property-group__body > :not(.lk-property-row--color) {
+  grid-column: 1 / -1;
+}
+
+.lk-property-group--pairs .lk-property-group__body > * {
+  grid-column: auto;
+}
+
+.lk-property-group--pairs .lk-property-group__body > h3,
+.lk-property-group--pairs .lk-property-group__body > .lk-property-group__span {
+  grid-column: 1 / -1;
+}

package/src/ui/properties/PropertyGroup.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PropertyGroup } from './PropertyGroup';
+import { PropertyList, PropertyPanel, SliderRow } from './PropertyPanel';
+
+const meta: Meta<typeof PropertyGroup> = {
+  title: 'labkit/UI/Properties/PropertyGroup',
+  component: PropertyGroup,
+};
+export default meta;
+
+export const Basic: StoryObj<typeof PropertyGroup> = {
+  render: () => (
+    <PropertyPanel title="Fill">
+      <PropertyList>
+        <SliderRow label="Amount" value={0.6} min={0} max={1} step={0.02} onChange={() => {}} />
+        <PropertyGroup title="Aqua">
+          <SliderRow
+            label="Light angle"
+            value={270}
+            min={0}
+            max={359}
+            step={1}
+            unit="°"
+            onChange={() => {}}
+          />
+          <SliderRow label="Gloss" value={0.55} min={0} max={1} step={0.02} onChange={() => {}} />
+        </PropertyGroup>
+        <PropertyGroup title="Bevel" hidden>
+          <SliderRow label="Rings" value={32} min={4} max={96} step={1} onChange={() => {}} />
+        </PropertyGroup>
+      </PropertyList>
+    </PropertyPanel>
+  ),
+};

package/src/ui/properties/PropertyGroup.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { PropertyGroup } from './PropertyGroup';
+
+describe('PropertyGroup', () => {
+  it('renders title and children', () => {
+    render(
+      <PropertyGroup title="Aqua">
+        <div>child</div>
+      </PropertyGroup>,
+    );
+    expect(screen.getByText('Aqua')).toBeInTheDocument();
+    expect(screen.getByText('child')).toBeInTheDocument();
+  });
+
+  it('renders nothing when hidden is true', () => {
+    const { container } = render(
+      <PropertyGroup title="Bevel" hidden>
+        <div>child</div>
+      </PropertyGroup>,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('applies subpanel class', () => {
+    const { container } = render(
+      <PropertyGroup title="Dome">
+        <div>x</div>
+      </PropertyGroup>,
+    );
+    expect(container.firstChild).toHaveClass('lk-property-group');
+  });
+});

package/src/ui/properties/PropertyGroup.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+
+export interface PropertyGroupProps {
+  /** Title rendered between two rules at the top of the group. */
+  title: ReactNode;
+  /** When true the group renders nothing — useful for conditional sections. */
+  hidden?: boolean;
+  children: ReactNode;
+  className?: string;
+  /**
+   * How rows pack into the 2-column grid.
+   *   - `'auto-color'` (default): only color rows pair side-by-side; everything
+   *     else spans the full width.
+   *   - `'pairs'`: every row auto-places into the 2-column grid two-per-row.
+   */
+  pack?: 'auto-color' | 'pairs';
+}
+
+/**
+ * Visually-bordered group inside a PropertyList. Use to scope a set of
+ * related rows under a heading (e.g. "Aqua", "Bevel", "Dome" sections
+ * inside a fill effect's controls).
+ */
+export function PropertyGroup({
+  title,
+  hidden,
+  children,
+  className,
+  pack = 'auto-color',
+}: PropertyGroupProps) {
+  if (hidden) return null;
+  const packClass = pack === 'pairs' ? ' lk-property-group--pairs' : '';
+  const cls = `lk-property-group${packClass}${className ? ` ${className}` : ''}`;
+  return (
+    <div className={cls}>
+      <h3 className="lk-property-group__title">
+        <hr />
+        <span>{title}</span>
+        <hr />
+      </h3>
+      <div className="lk-property-group__body">{children}</div>
+    </div>
+  );
+}

package/src/ui/properties/PropertyList.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { CheckboxRow, ColorRow, PropertyList, PropertyRow, SliderRow } from './PropertyPanel';
+
+const meta: Meta<typeof PropertyList> = {
+  title: 'labkit/UI/Properties/PropertyList',
+  component: PropertyList,
+};
+export default meta;
+type Story = StoryObj<typeof PropertyList>;
+
+function Mixed() {
+  const [opacity, setOpacity] = useState(0.5);
+  const [fill, setFill] = useState('#b08adb');
+  const [stroke, setStroke] = useState('#1a1428');
+  const [visible, setVisible] = useState(true);
+  return (
+    <div style={{ width: 320 }}>
+      <PropertyList>
+        <SliderRow
+          label="Opacity"
+          value={opacity}
+          min={0}
+          max={1}
+          step={0.01}
+          onChange={setOpacity}
+          format={(v) => v.toFixed(2)}
+        />
+        <ColorRow label="Fill" value={fill} onChange={setFill} />
+        <ColorRow label="Stroke" value={stroke} onChange={setStroke} />
+        <CheckboxRow label="Visible" value={visible} onChange={setVisible} />
+      </PropertyList>
+    </div>
+  );
+}
+
+/** Standalone (no chrome) — drop into a sidebar or any container. */
+export const Standalone: Story = {
+  render: () => <Mixed />,
+};
+
+/** Four ColorRows pack into two rows of two via the 2-col grid. */
+export const FourColors: Story = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <PropertyList>
+        <ColorRow label="A" value="#b08adb" onChange={() => {}} />
+        <ColorRow label="B" value="#7fb069" onChange={() => {}} />
+        <ColorRow label="C" value="#e07a5f" onChange={() => {}} />
+        <ColorRow label="D" value="#74c69d" onChange={() => {}} />
+      </PropertyList>
+    </div>
+  ),
+};
+
+/** An odd number of ColorRows leaves the trailing cell empty. */
+export const ThreeColors: Story = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <PropertyList>
+        <ColorRow label="A" value="#b08adb" onChange={() => {}} />
+        <ColorRow label="B" value="#7fb069" onChange={() => {}} />
+        <ColorRow label="C" value="#e07a5f" onChange={() => {}} />
+      </PropertyList>
+    </div>
+  ),
+};
+
+/** A non-color row in the middle breaks color pairing — A pairs with the empty cell. */
+export const ColorPairingBrokenBySlider: Story = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <PropertyList>
+        <ColorRow label="A" value="#b08adb" onChange={() => {}} />
+        <PropertyRow label="Divider">
+          <input type="text" defaultValue="full width row" />
+        </PropertyRow>
+        <ColorRow label="B" value="#7fb069" onChange={() => {}} />
+        <ColorRow label="C" value="#e07a5f" onChange={() => {}} />
+      </PropertyList>
+    </div>
+  ),
+};