feat(rgov): add rGov governance decision circuit module
Implements 5 new FolkShape web components for visual governance: - folk-gov-binary: Yes/No signoff gates - folk-gov-threshold: Numeric progress gates with contributions - folk-gov-knob: SVG rotary parameter knobs with temporal viscosity - folk-gov-project: Circuit aggregators (walks arrow graph backward) - folk-gov-amendment: Modification proposals with approval voting Also adds "satisfied" gate condition to folk-arrow, 5 AI canvas tools, module registration, and all canvas.html wiring. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
5f45014226
commit
f375eb1b43
|
|
@ -489,6 +489,133 @@ registry.push({
|
||||||
actionLabel: (args) => `Opened design agent${args.brief ? `: ${args.brief.slice(0, 50)}` : ""}`,
|
actionLabel: (args) => `Opened design agent${args.brief ? `: ${args.brief.slice(0, 50)}` : ""}`,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ── rGov Governance Circuit Tools ──
|
||||||
|
registry.push(
|
||||||
|
{
|
||||||
|
declaration: {
|
||||||
|
name: "create_binary_gate",
|
||||||
|
description: "Create a Yes/No signoff gate on the canvas. Use when a decision requires someone's explicit approval or sign-off.",
|
||||||
|
parameters: {
|
||||||
|
type: "object",
|
||||||
|
properties: {
|
||||||
|
title: { type: "string", description: "Title for the signoff gate (e.g. 'Proprietor Approval')" },
|
||||||
|
assignee: { type: "string", description: "Who must sign off (leave empty for 'anyone')" },
|
||||||
|
},
|
||||||
|
required: ["title"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tagName: "folk-gov-binary",
|
||||||
|
moduleId: "rgov",
|
||||||
|
buildProps: (args) => ({
|
||||||
|
title: args.title,
|
||||||
|
...(args.assignee ? { assignee: args.assignee } : {}),
|
||||||
|
}),
|
||||||
|
actionLabel: (args) => `Created binary gate: ${args.title}`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
declaration: {
|
||||||
|
name: "create_threshold",
|
||||||
|
description: "Create a numeric threshold gate on the canvas. Use when a decision requires accumulating a target amount (hours, dollars, signatures, etc.).",
|
||||||
|
parameters: {
|
||||||
|
type: "object",
|
||||||
|
properties: {
|
||||||
|
title: { type: "string", description: "Title for the threshold (e.g. 'Capital Required')" },
|
||||||
|
target: { type: "number", description: "Target value to reach" },
|
||||||
|
unit: { type: "string", description: "Unit of measurement (e.g. '$', 'hours', 'signatures')" },
|
||||||
|
},
|
||||||
|
required: ["title", "target"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tagName: "folk-gov-threshold",
|
||||||
|
moduleId: "rgov",
|
||||||
|
buildProps: (args) => ({
|
||||||
|
title: args.title,
|
||||||
|
target: args.target,
|
||||||
|
...(args.unit ? { unit: args.unit } : {}),
|
||||||
|
}),
|
||||||
|
actionLabel: (args) => `Created threshold: ${args.title} (${args.target} ${args.unit || ""})`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
declaration: {
|
||||||
|
name: "create_gov_knob",
|
||||||
|
description: "Create an adjustable parameter knob on the canvas. Use when a governance parameter needs to be tunable (e.g. quorum percentage, budget cap).",
|
||||||
|
parameters: {
|
||||||
|
type: "object",
|
||||||
|
properties: {
|
||||||
|
title: { type: "string", description: "Parameter name (e.g. 'Quorum %')" },
|
||||||
|
min: { type: "number", description: "Minimum value" },
|
||||||
|
max: { type: "number", description: "Maximum value" },
|
||||||
|
value: { type: "number", description: "Initial value" },
|
||||||
|
unit: { type: "string", description: "Unit label (e.g. '%', '$', 'hours')" },
|
||||||
|
cooldown: { type: "number", description: "Cooldown in seconds before value propagates (0 for instant)" },
|
||||||
|
},
|
||||||
|
required: ["title"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tagName: "folk-gov-knob",
|
||||||
|
moduleId: "rgov",
|
||||||
|
buildProps: (args) => ({
|
||||||
|
title: args.title,
|
||||||
|
...(args.min != null ? { min: args.min } : {}),
|
||||||
|
...(args.max != null ? { max: args.max } : {}),
|
||||||
|
...(args.value != null ? { value: args.value } : {}),
|
||||||
|
...(args.unit ? { unit: args.unit } : {}),
|
||||||
|
...(args.cooldown != null ? { cooldown: args.cooldown } : {}),
|
||||||
|
}),
|
||||||
|
actionLabel: (args) => `Created knob: ${args.title}`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
declaration: {
|
||||||
|
name: "create_gov_project",
|
||||||
|
description: "Create a governance project aggregator on the canvas. It automatically tracks all upstream gates wired to it and shows overall completion progress.",
|
||||||
|
parameters: {
|
||||||
|
type: "object",
|
||||||
|
properties: {
|
||||||
|
title: { type: "string", description: "Project title (e.g. 'Build a Climbing Wall')" },
|
||||||
|
description: { type: "string", description: "Project description" },
|
||||||
|
status: { type: "string", description: "Initial status", enum: ["draft", "active", "completed", "archived"] },
|
||||||
|
},
|
||||||
|
required: ["title"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tagName: "folk-gov-project",
|
||||||
|
moduleId: "rgov",
|
||||||
|
buildProps: (args) => ({
|
||||||
|
title: args.title,
|
||||||
|
...(args.description ? { description: args.description } : {}),
|
||||||
|
...(args.status ? { status: args.status } : {}),
|
||||||
|
}),
|
||||||
|
actionLabel: (args) => `Created project: ${args.title}`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
declaration: {
|
||||||
|
name: "create_amendment",
|
||||||
|
description: "Create a governance amendment proposal on the canvas. An amendment proposes replacing one gate with another (e.g. converting a dollar threshold into a binary checkbox).",
|
||||||
|
parameters: {
|
||||||
|
type: "object",
|
||||||
|
properties: {
|
||||||
|
title: { type: "string", description: "Amendment title" },
|
||||||
|
targetShapeId: { type: "string", description: "ID of the shape to modify" },
|
||||||
|
replacementType: { type: "string", description: "Type of replacement shape (e.g. 'folk-gov-binary')" },
|
||||||
|
approvalMode: { type: "string", description: "How approval works", enum: ["single", "majority", "unanimous"] },
|
||||||
|
description: { type: "string", description: "Description of what the amendment changes" },
|
||||||
|
},
|
||||||
|
required: ["title"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tagName: "folk-gov-amendment",
|
||||||
|
moduleId: "rgov",
|
||||||
|
buildProps: (args) => ({
|
||||||
|
title: args.title,
|
||||||
|
...(args.targetShapeId ? { targetShapeId: args.targetShapeId } : {}),
|
||||||
|
...(args.replacementType ? { replacementType: args.replacementType } : {}),
|
||||||
|
...(args.approvalMode ? { approvalMode: args.approvalMode } : {}),
|
||||||
|
...(args.description ? { description: args.description } : {}),
|
||||||
|
}),
|
||||||
|
actionLabel: (args) => `Created amendment: ${args.title}`,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
export const CANVAS_TOOLS: CanvasToolDefinition[] = [...registry];
|
export const CANVAS_TOOLS: CanvasToolDefinition[] = [...registry];
|
||||||
|
|
||||||
export const CANVAS_TOOL_DECLARATIONS = CANVAS_TOOLS.map((t) => t.declaration);
|
export const CANVAS_TOOL_DECLARATIONS = CANVAS_TOOLS.map((t) => t.declaration);
|
||||||
|
|
|
||||||
|
|
@ -138,7 +138,7 @@ export type ArrowStyle = "smooth" | "straight" | "curved" | "sketchy";
|
||||||
export interface ArrowGate {
|
export interface ArrowGate {
|
||||||
shapeId: string; // governance shape ID
|
shapeId: string; // governance shape ID
|
||||||
portName: string; // port to watch (e.g. "decision-out")
|
portName: string; // port to watch (e.g. "decision-out")
|
||||||
condition: "truthy" | "passed" | "threshold";
|
condition: "truthy" | "passed" | "threshold" | "satisfied";
|
||||||
threshold?: number;
|
threshold?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -464,6 +464,8 @@ export class FolkArrow extends FolkElement {
|
||||||
const v = value as any;
|
const v = value as any;
|
||||||
const num = typeof v === "number" ? v : (v?.margin ?? v?.score ?? 0);
|
const num = typeof v === "number" ? v : (v?.margin ?? v?.score ?? 0);
|
||||||
this.#gateOpen = num >= (this.#gate.threshold ?? 0.5);
|
this.#gateOpen = num >= (this.#gate.threshold ?? 0.5);
|
||||||
|
} else if (this.#gate.condition === "satisfied") {
|
||||||
|
this.#gateOpen = (value as any)?.satisfied === true;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (wasOpen !== this.#gateOpen) this.#updateArrow();
|
if (wasOpen !== this.#gateOpen) this.#updateArrow();
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,710 @@
|
||||||
|
/**
|
||||||
|
* folk-gov-amendment — Circuit Modification Proposal
|
||||||
|
*
|
||||||
|
* References a target shape to modify, contains proposed replacement data.
|
||||||
|
* Built-in approval mechanism (majority/unanimous/single) with inline voter list.
|
||||||
|
* Shows a "Before → After" diff view. On approval, dispatches gov-amendment-apply
|
||||||
|
* event to replace the target shape while preserving its ID.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { FolkShape } from "./folk-shape";
|
||||||
|
import { css, html } from "./tags";
|
||||||
|
import type { PortDescriptor } from "./data-types";
|
||||||
|
|
||||||
|
const HEADER_COLOR = "#be185d";
|
||||||
|
|
||||||
|
type ApprovalMode = "single" | "majority" | "unanimous";
|
||||||
|
|
||||||
|
interface Vote {
|
||||||
|
voter: string;
|
||||||
|
approve: boolean;
|
||||||
|
timestamp: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = css`
|
||||||
|
:host {
|
||||||
|
background: var(--rs-bg-surface, #1e293b);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
|
||||||
|
min-width: 280px;
|
||||||
|
min-height: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: ${HEADER_COLOR};
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: move;
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions button {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions button:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 12px;
|
||||||
|
gap: 8px;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: calc(100% - 36px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-input {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
width: 100%;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-input::placeholder {
|
||||||
|
color: var(--rs-text-muted, #64748b);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--rs-text-muted, #94a3b8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-input {
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 3px 6px;
|
||||||
|
outline: none;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-select {
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 3px 6px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-label {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
color: var(--rs-text-muted, #64748b);
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-box {
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-family: monospace;
|
||||||
|
color: var(--rs-text-secondary, #94a3b8);
|
||||||
|
max-height: 60px;
|
||||||
|
overflow-y: auto;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-box.before {
|
||||||
|
border-left: 3px solid #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-box.after {
|
||||||
|
border-left: 3px solid #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-arrow {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--rs-text-muted, #475569);
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc-textarea {
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--rs-text-secondary, #cbd5e1);
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
min-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc-textarea::placeholder {
|
||||||
|
color: var(--rs-text-muted, #475569);
|
||||||
|
}
|
||||||
|
|
||||||
|
.voters-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voter-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 3px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.voter-name {
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-badge {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 1px 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-badge.approve {
|
||||||
|
background: rgba(34, 197, 94, 0.2);
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-badge.reject {
|
||||||
|
background: rgba(239, 68, 68, 0.2);
|
||||||
|
color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-name-input {
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 3px 6px;
|
||||||
|
outline: none;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-btn {
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 3px 8px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-btn.approve {
|
||||||
|
background: #22c55e;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-btn.reject {
|
||||||
|
background: #ef4444;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-btn:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apply-btn {
|
||||||
|
background: ${HEADER_COLOR};
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apply-btn:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apply-btn:disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.pending {
|
||||||
|
background: rgba(245, 158, 11, 0.2);
|
||||||
|
color: #f59e0b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.approved {
|
||||||
|
background: rgba(34, 197, 94, 0.2);
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.rejected {
|
||||||
|
background: rgba(239, 68, 68, 0.2);
|
||||||
|
color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.applied {
|
||||||
|
background: rgba(29, 78, 216, 0.2);
|
||||||
|
color: #60a5fa;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"folk-gov-amendment": FolkGovAmendment;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class FolkGovAmendment extends FolkShape {
|
||||||
|
static override tagName = "folk-gov-amendment";
|
||||||
|
|
||||||
|
static override portDescriptors: PortDescriptor[] = [
|
||||||
|
{ name: "approval-in", type: "json", direction: "input" },
|
||||||
|
{ name: "amendment-out", type: "json", direction: "output" },
|
||||||
|
{ name: "gate-out", type: "json", direction: "output" },
|
||||||
|
];
|
||||||
|
|
||||||
|
static {
|
||||||
|
const sheet = new CSSStyleSheet();
|
||||||
|
const parentRules = Array.from(FolkShape.styles.cssRules).map(r => r.cssText).join("\n");
|
||||||
|
const childRules = Array.from(styles.cssRules).map(r => r.cssText).join("\n");
|
||||||
|
sheet.replaceSync(`${parentRules}\n${childRules}`);
|
||||||
|
this.styles = sheet;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title = "Amendment";
|
||||||
|
#targetShapeId = "";
|
||||||
|
#replacementType = "folk-gov-binary"; // what to replace with
|
||||||
|
#replacementData: Record<string, any> = {};
|
||||||
|
#approvalMode: ApprovalMode = "single";
|
||||||
|
#votes: Vote[] = [];
|
||||||
|
#amendmentStatus: "pending" | "approved" | "rejected" | "applied" = "pending";
|
||||||
|
#description = "";
|
||||||
|
|
||||||
|
// DOM refs
|
||||||
|
#titleEl!: HTMLInputElement;
|
||||||
|
#targetEl!: HTMLInputElement;
|
||||||
|
#replTypeEl!: HTMLInputElement;
|
||||||
|
#modeEl!: HTMLSelectElement;
|
||||||
|
#descEl!: HTMLTextAreaElement;
|
||||||
|
#votersEl!: HTMLElement;
|
||||||
|
#statusEl!: HTMLElement;
|
||||||
|
#applyBtn!: HTMLButtonElement;
|
||||||
|
#beforeBox!: HTMLElement;
|
||||||
|
#voteNameEl!: HTMLInputElement;
|
||||||
|
|
||||||
|
get title() { return this.#title; }
|
||||||
|
set title(v: string) {
|
||||||
|
this.#title = v;
|
||||||
|
if (this.#titleEl) this.#titleEl.value = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
get targetShapeId() { return this.#targetShapeId; }
|
||||||
|
set targetShapeId(v: string) {
|
||||||
|
this.#targetShapeId = v;
|
||||||
|
if (this.#targetEl) this.#targetEl.value = v;
|
||||||
|
this.#updateDiff();
|
||||||
|
}
|
||||||
|
|
||||||
|
get replacementType() { return this.#replacementType; }
|
||||||
|
set replacementType(v: string) {
|
||||||
|
this.#replacementType = v;
|
||||||
|
if (this.#replTypeEl) this.#replTypeEl.value = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
get replacementData() { return this.#replacementData; }
|
||||||
|
set replacementData(v: Record<string, any>) { this.#replacementData = v; }
|
||||||
|
|
||||||
|
get approvalMode(): ApprovalMode { return this.#approvalMode; }
|
||||||
|
set approvalMode(v: ApprovalMode) {
|
||||||
|
this.#approvalMode = v;
|
||||||
|
if (this.#modeEl) this.#modeEl.value = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
get votes() { return [...this.#votes]; }
|
||||||
|
set votes(v: Vote[]) {
|
||||||
|
this.#votes = v;
|
||||||
|
this.#renderVoters();
|
||||||
|
this.#checkApproval();
|
||||||
|
}
|
||||||
|
|
||||||
|
get amendmentStatus() { return this.#amendmentStatus; }
|
||||||
|
set amendmentStatus(v: "pending" | "approved" | "rejected" | "applied") {
|
||||||
|
this.#amendmentStatus = v;
|
||||||
|
this.#updateStatusBadge();
|
||||||
|
}
|
||||||
|
|
||||||
|
get description() { return this.#description; }
|
||||||
|
set description(v: string) {
|
||||||
|
this.#description = v;
|
||||||
|
if (this.#descEl) this.#descEl.value = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
override createRenderRoot() {
|
||||||
|
const root = super.createRenderRoot();
|
||||||
|
this.initPorts();
|
||||||
|
|
||||||
|
const wrapper = document.createElement("div");
|
||||||
|
wrapper.style.cssText = "width:100%;height:100%;display:flex;flex-direction:column;";
|
||||||
|
wrapper.innerHTML = html`
|
||||||
|
<div class="header" data-drag>
|
||||||
|
<span class="header-title">📝 Amendment</span>
|
||||||
|
<span class="header-actions">
|
||||||
|
<button class="close-btn">×</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<input class="title-input" type="text" placeholder="Amendment title..." />
|
||||||
|
<div class="field-row">
|
||||||
|
<span>Target:</span>
|
||||||
|
<input class="field-input target-id" type="text" placeholder="shape ID to replace" />
|
||||||
|
</div>
|
||||||
|
<div class="field-row">
|
||||||
|
<span>Replace with:</span>
|
||||||
|
<input class="field-input repl-type" type="text" placeholder="folk-gov-binary" />
|
||||||
|
</div>
|
||||||
|
<div class="field-row">
|
||||||
|
<span>Approval:</span>
|
||||||
|
<select class="mode-select">
|
||||||
|
<option value="single">Single</option>
|
||||||
|
<option value="majority">Majority</option>
|
||||||
|
<option value="unanimous">Unanimous</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<textarea class="desc-textarea" placeholder="Describe what this amendment changes..." rows="2"></textarea>
|
||||||
|
<div class="diff-section">
|
||||||
|
<span class="diff-label">Before</span>
|
||||||
|
<div class="diff-box before"></div>
|
||||||
|
<div class="diff-arrow">↓</div>
|
||||||
|
<span class="diff-label">After</span>
|
||||||
|
<div class="diff-box after"></div>
|
||||||
|
</div>
|
||||||
|
<div class="voters-section"></div>
|
||||||
|
<div class="vote-actions">
|
||||||
|
<input class="vote-name-input" type="text" placeholder="Your name" />
|
||||||
|
<button class="vote-btn approve">✓</button>
|
||||||
|
<button class="vote-btn reject">✗</button>
|
||||||
|
</div>
|
||||||
|
<span class="status-badge pending">PENDING</span>
|
||||||
|
<button class="apply-btn" disabled>Apply Amendment</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const slot = root.querySelector("slot");
|
||||||
|
const container = slot?.parentElement as HTMLElement;
|
||||||
|
if (container) container.replaceWith(wrapper);
|
||||||
|
|
||||||
|
// Cache refs
|
||||||
|
this.#titleEl = wrapper.querySelector(".title-input") as HTMLInputElement;
|
||||||
|
this.#targetEl = wrapper.querySelector(".target-id") as HTMLInputElement;
|
||||||
|
this.#replTypeEl = wrapper.querySelector(".repl-type") as HTMLInputElement;
|
||||||
|
this.#modeEl = wrapper.querySelector(".mode-select") as HTMLSelectElement;
|
||||||
|
this.#descEl = wrapper.querySelector(".desc-textarea") as HTMLTextAreaElement;
|
||||||
|
this.#votersEl = wrapper.querySelector(".voters-section") as HTMLElement;
|
||||||
|
this.#statusEl = wrapper.querySelector(".status-badge") as HTMLElement;
|
||||||
|
this.#applyBtn = wrapper.querySelector(".apply-btn") as HTMLButtonElement;
|
||||||
|
this.#beforeBox = wrapper.querySelector(".diff-box.before") as HTMLElement;
|
||||||
|
this.#voteNameEl = wrapper.querySelector(".vote-name-input") as HTMLInputElement;
|
||||||
|
const afterBox = wrapper.querySelector(".diff-box.after") as HTMLElement;
|
||||||
|
|
||||||
|
// Set initial values
|
||||||
|
this.#titleEl.value = this.#title;
|
||||||
|
this.#targetEl.value = this.#targetShapeId;
|
||||||
|
this.#replTypeEl.value = this.#replacementType;
|
||||||
|
this.#modeEl.value = this.#approvalMode;
|
||||||
|
this.#descEl.value = this.#description;
|
||||||
|
afterBox.textContent = this.#replacementType;
|
||||||
|
this.#updateDiff();
|
||||||
|
this.#renderVoters();
|
||||||
|
this.#updateStatusBadge();
|
||||||
|
|
||||||
|
// Wire events
|
||||||
|
const onChange = () => this.dispatchEvent(new CustomEvent("content-change"));
|
||||||
|
|
||||||
|
this.#titleEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#title = this.#titleEl.value;
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#targetEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#targetShapeId = this.#targetEl.value;
|
||||||
|
this.#updateDiff();
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#replTypeEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#replacementType = this.#replTypeEl.value;
|
||||||
|
afterBox.textContent = `type: ${this.#replacementType}`;
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#modeEl.addEventListener("change", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#approvalMode = this.#modeEl.value as ApprovalMode;
|
||||||
|
this.#checkApproval();
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#descEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#description = this.#descEl.value;
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Vote buttons
|
||||||
|
wrapper.querySelector(".vote-btn.approve")!.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#castVote(true);
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.querySelector(".vote-btn.reject")!.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#castVote(false);
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Apply button
|
||||||
|
this.#applyBtn.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#applyAmendment();
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.querySelector(".close-btn")!.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.dispatchEvent(new CustomEvent("close"));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prevent drag on inputs
|
||||||
|
for (const el of wrapper.querySelectorAll("input, textarea, select, button")) {
|
||||||
|
el.addEventListener("pointerdown", (e) => e.stopPropagation());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle approval-in port
|
||||||
|
this.addEventListener("port-value-changed", ((e: CustomEvent) => {
|
||||||
|
const { name, value } = e.detail;
|
||||||
|
if (name === "approval-in" && value && typeof value === "object") {
|
||||||
|
const v = value as any;
|
||||||
|
if (v.voter && v.approve !== undefined) {
|
||||||
|
this.#votes.push({
|
||||||
|
voter: v.voter,
|
||||||
|
approve: !!v.approve,
|
||||||
|
timestamp: v.timestamp || Date.now(),
|
||||||
|
});
|
||||||
|
this.#renderVoters();
|
||||||
|
this.#checkApproval();
|
||||||
|
onChange();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}) as EventListener);
|
||||||
|
|
||||||
|
return root;
|
||||||
|
}
|
||||||
|
|
||||||
|
#updateDiff() {
|
||||||
|
if (!this.#beforeBox) return;
|
||||||
|
if (!this.#targetShapeId) {
|
||||||
|
this.#beforeBox.textContent = "(no target selected)";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const target = document.getElementById(this.#targetShapeId) as any;
|
||||||
|
if (!target) {
|
||||||
|
this.#beforeBox.textContent = `(shape "${this.#targetShapeId}" not found)`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const data = target.toJSON?.() || {};
|
||||||
|
this.#beforeBox.textContent = `type: ${data.type || target.tagName}\ntitle: ${data.title || "—"}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
#castVote(approve: boolean) {
|
||||||
|
const voter = this.#voteNameEl?.value.trim() || "anonymous";
|
||||||
|
// Prevent duplicate votes from same voter
|
||||||
|
const existing = this.#votes.findIndex(v => v.voter === voter);
|
||||||
|
if (existing >= 0) {
|
||||||
|
this.#votes[existing] = { voter, approve, timestamp: Date.now() };
|
||||||
|
} else {
|
||||||
|
this.#votes.push({ voter, approve, timestamp: Date.now() });
|
||||||
|
}
|
||||||
|
if (this.#voteNameEl) this.#voteNameEl.value = "";
|
||||||
|
this.#renderVoters();
|
||||||
|
this.#checkApproval();
|
||||||
|
}
|
||||||
|
|
||||||
|
#renderVoters() {
|
||||||
|
if (!this.#votersEl) return;
|
||||||
|
this.#votersEl.innerHTML = this.#votes.map(v => {
|
||||||
|
const badge = v.approve
|
||||||
|
? `<span class="vote-badge approve">YES</span>`
|
||||||
|
: `<span class="vote-badge reject">NO</span>`;
|
||||||
|
return `<div class="voter-row"><span class="voter-name">${v.voter}</span>${badge}</div>`;
|
||||||
|
}).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
#checkApproval() {
|
||||||
|
if (this.#amendmentStatus === "applied") return;
|
||||||
|
|
||||||
|
const approvals = this.#votes.filter(v => v.approve).length;
|
||||||
|
const rejections = this.#votes.filter(v => !v.approve).length;
|
||||||
|
const total = this.#votes.length;
|
||||||
|
|
||||||
|
let approved = false;
|
||||||
|
if (this.#approvalMode === "single") {
|
||||||
|
approved = approvals >= 1;
|
||||||
|
} else if (this.#approvalMode === "majority") {
|
||||||
|
approved = total > 0 && approvals > total / 2;
|
||||||
|
} else if (this.#approvalMode === "unanimous") {
|
||||||
|
approved = total > 0 && rejections === 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (approved) {
|
||||||
|
this.#amendmentStatus = "approved";
|
||||||
|
} else if (total > 0 && this.#approvalMode === "unanimous" && rejections > 0) {
|
||||||
|
this.#amendmentStatus = "rejected";
|
||||||
|
} else {
|
||||||
|
this.#amendmentStatus = "pending";
|
||||||
|
}
|
||||||
|
|
||||||
|
this.#updateStatusBadge();
|
||||||
|
this.#emitPorts();
|
||||||
|
}
|
||||||
|
|
||||||
|
#updateStatusBadge() {
|
||||||
|
if (!this.#statusEl || !this.#applyBtn) return;
|
||||||
|
this.#statusEl.textContent = this.#amendmentStatus.toUpperCase();
|
||||||
|
this.#statusEl.className = `status-badge ${this.#amendmentStatus}`;
|
||||||
|
this.#applyBtn.disabled = this.#amendmentStatus !== "approved";
|
||||||
|
}
|
||||||
|
|
||||||
|
#applyAmendment() {
|
||||||
|
if (this.#amendmentStatus !== "approved") return;
|
||||||
|
if (!this.#targetShapeId) return;
|
||||||
|
|
||||||
|
// Dispatch event for canvas to handle the shape replacement
|
||||||
|
this.dispatchEvent(new CustomEvent("gov-amendment-apply", {
|
||||||
|
bubbles: true,
|
||||||
|
composed: true,
|
||||||
|
detail: {
|
||||||
|
targetShapeId: this.#targetShapeId,
|
||||||
|
replacementType: this.#replacementType,
|
||||||
|
replacementData: this.#replacementData,
|
||||||
|
amendmentId: this.id,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.#amendmentStatus = "applied";
|
||||||
|
this.#updateStatusBadge();
|
||||||
|
this.#emitPorts();
|
||||||
|
}
|
||||||
|
|
||||||
|
#emitPorts() {
|
||||||
|
const data = {
|
||||||
|
status: this.#amendmentStatus,
|
||||||
|
targetShapeId: this.#targetShapeId,
|
||||||
|
approved: this.#amendmentStatus === "approved" || this.#amendmentStatus === "applied",
|
||||||
|
};
|
||||||
|
this.setPortValue("amendment-out", data);
|
||||||
|
this.setPortValue("gate-out", {
|
||||||
|
satisfied: this.#amendmentStatus === "approved" || this.#amendmentStatus === "applied",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
override toJSON() {
|
||||||
|
return {
|
||||||
|
...super.toJSON(),
|
||||||
|
type: "folk-gov-amendment",
|
||||||
|
title: this.#title,
|
||||||
|
targetShapeId: this.#targetShapeId,
|
||||||
|
replacementType: this.#replacementType,
|
||||||
|
replacementData: this.#replacementData,
|
||||||
|
approvalMode: this.#approvalMode,
|
||||||
|
votes: this.#votes,
|
||||||
|
amendmentStatus: this.#amendmentStatus,
|
||||||
|
description: this.#description,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
static override fromData(data: Record<string, any>): FolkGovAmendment {
|
||||||
|
const shape = FolkShape.fromData.call(this, data) as FolkGovAmendment;
|
||||||
|
if (data.title !== undefined) shape.title = data.title;
|
||||||
|
if (data.targetShapeId !== undefined) shape.targetShapeId = data.targetShapeId;
|
||||||
|
if (data.replacementType !== undefined) shape.replacementType = data.replacementType;
|
||||||
|
if (data.replacementData !== undefined) shape.replacementData = data.replacementData;
|
||||||
|
if (data.approvalMode !== undefined) shape.approvalMode = data.approvalMode;
|
||||||
|
if (data.votes !== undefined) shape.votes = data.votes;
|
||||||
|
if (data.amendmentStatus !== undefined) shape.amendmentStatus = data.amendmentStatus;
|
||||||
|
if (data.description !== undefined) shape.description = data.description;
|
||||||
|
return shape;
|
||||||
|
}
|
||||||
|
|
||||||
|
override applyData(data: Record<string, any>): void {
|
||||||
|
super.applyData(data);
|
||||||
|
if (data.title !== undefined && data.title !== this.#title) this.title = data.title;
|
||||||
|
if (data.targetShapeId !== undefined && data.targetShapeId !== this.#targetShapeId) this.targetShapeId = data.targetShapeId;
|
||||||
|
if (data.replacementType !== undefined && data.replacementType !== this.#replacementType) this.replacementType = data.replacementType;
|
||||||
|
if (data.replacementData !== undefined) this.replacementData = data.replacementData;
|
||||||
|
if (data.approvalMode !== undefined && data.approvalMode !== this.#approvalMode) this.approvalMode = data.approvalMode;
|
||||||
|
if (data.votes !== undefined) this.votes = data.votes;
|
||||||
|
if (data.amendmentStatus !== undefined && data.amendmentStatus !== this.#amendmentStatus) this.amendmentStatus = data.amendmentStatus;
|
||||||
|
if (data.description !== undefined && data.description !== this.#description) this.description = data.description;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,345 @@
|
||||||
|
/**
|
||||||
|
* folk-gov-binary — Yes/No Signoff Gate
|
||||||
|
*
|
||||||
|
* A simple binary governance gate. An optional assignee can be specified
|
||||||
|
* (who must sign off). When checked, emits { satisfied: true } on gate-out.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { FolkShape } from "./folk-shape";
|
||||||
|
import { css, html } from "./tags";
|
||||||
|
import type { PortDescriptor } from "./data-types";
|
||||||
|
|
||||||
|
const HEADER_COLOR = "#7c3aed";
|
||||||
|
|
||||||
|
const styles = css`
|
||||||
|
:host {
|
||||||
|
background: var(--rs-bg-surface, #1e293b);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
|
||||||
|
min-width: 200px;
|
||||||
|
min-height: 80px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: ${HEADER_COLOR};
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: move;
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions button {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions button:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-input {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-input::placeholder {
|
||||||
|
color: var(--rs-text-muted, #64748b);
|
||||||
|
}
|
||||||
|
|
||||||
|
.assignee-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--rs-text-muted, #94a3b8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.assignee-input {
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
width: 100px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-area {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gate-checkbox {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gate-checkbox:checked {
|
||||||
|
background: #22c55e;
|
||||||
|
border-color: #22c55e;
|
||||||
|
box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gate-checkbox:checked::after {
|
||||||
|
content: "✓";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gate-checkbox:not(:checked) {
|
||||||
|
box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
|
||||||
|
border-color: #f59e0b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-label {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-label.satisfied {
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-label.waiting {
|
||||||
|
color: #f59e0b;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"folk-gov-binary": FolkGovBinary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class FolkGovBinary extends FolkShape {
|
||||||
|
static override tagName = "folk-gov-binary";
|
||||||
|
|
||||||
|
static override portDescriptors: PortDescriptor[] = [
|
||||||
|
{ name: "gate-out", type: "json", direction: "output" },
|
||||||
|
];
|
||||||
|
|
||||||
|
static {
|
||||||
|
const sheet = new CSSStyleSheet();
|
||||||
|
const parentRules = Array.from(FolkShape.styles.cssRules).map(r => r.cssText).join("\n");
|
||||||
|
const childRules = Array.from(styles.cssRules).map(r => r.cssText).join("\n");
|
||||||
|
sheet.replaceSync(`${parentRules}\n${childRules}`);
|
||||||
|
this.styles = sheet;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title = "Signoff Required";
|
||||||
|
#assignee = "";
|
||||||
|
#satisfied = false;
|
||||||
|
#signedBy = "";
|
||||||
|
#timestamp = 0;
|
||||||
|
|
||||||
|
// DOM refs
|
||||||
|
#titleEl!: HTMLInputElement;
|
||||||
|
#assigneeEl!: HTMLInputElement;
|
||||||
|
#checkboxEl!: HTMLInputElement;
|
||||||
|
#statusEl!: HTMLElement;
|
||||||
|
|
||||||
|
get title() { return this.#title; }
|
||||||
|
set title(v: string) {
|
||||||
|
this.#title = v;
|
||||||
|
if (this.#titleEl) this.#titleEl.value = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
get assignee() { return this.#assignee; }
|
||||||
|
set assignee(v: string) {
|
||||||
|
this.#assignee = v;
|
||||||
|
if (this.#assigneeEl) this.#assigneeEl.value = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
get satisfied() { return this.#satisfied; }
|
||||||
|
set satisfied(v: boolean) {
|
||||||
|
this.#satisfied = v;
|
||||||
|
if (this.#checkboxEl) this.#checkboxEl.checked = v;
|
||||||
|
this.#updateVisuals();
|
||||||
|
this.#emitPort();
|
||||||
|
}
|
||||||
|
|
||||||
|
get signedBy() { return this.#signedBy; }
|
||||||
|
set signedBy(v: string) { this.#signedBy = v; }
|
||||||
|
|
||||||
|
get timestamp() { return this.#timestamp; }
|
||||||
|
set timestamp(v: number) { this.#timestamp = v; }
|
||||||
|
|
||||||
|
override createRenderRoot() {
|
||||||
|
const root = super.createRenderRoot();
|
||||||
|
this.initPorts();
|
||||||
|
|
||||||
|
const wrapper = document.createElement("div");
|
||||||
|
wrapper.style.cssText = "width:100%;height:100%;display:flex;flex-direction:column;";
|
||||||
|
wrapper.innerHTML = html`
|
||||||
|
<div class="header" data-drag>
|
||||||
|
<span class="header-title">⚖️ Binary Gate</span>
|
||||||
|
<span class="header-actions">
|
||||||
|
<button class="close-btn">×</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<input class="title-input" type="text" placeholder="Gate title..." />
|
||||||
|
<div class="assignee-row">
|
||||||
|
<span>Assignee:</span>
|
||||||
|
<input class="assignee-input" type="text" placeholder="anyone" />
|
||||||
|
</div>
|
||||||
|
<div class="check-area">
|
||||||
|
<input class="gate-checkbox" type="checkbox" />
|
||||||
|
</div>
|
||||||
|
<span class="status-label waiting">WAITING</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const slot = root.querySelector("slot");
|
||||||
|
const container = slot?.parentElement as HTMLElement;
|
||||||
|
if (container) container.replaceWith(wrapper);
|
||||||
|
|
||||||
|
// Cache refs
|
||||||
|
this.#titleEl = wrapper.querySelector(".title-input") as HTMLInputElement;
|
||||||
|
this.#assigneeEl = wrapper.querySelector(".assignee-input") as HTMLInputElement;
|
||||||
|
this.#checkboxEl = wrapper.querySelector(".gate-checkbox") as HTMLInputElement;
|
||||||
|
this.#statusEl = wrapper.querySelector(".status-label") as HTMLElement;
|
||||||
|
|
||||||
|
// Set initial values
|
||||||
|
this.#titleEl.value = this.#title;
|
||||||
|
this.#assigneeEl.value = this.#assignee;
|
||||||
|
this.#checkboxEl.checked = this.#satisfied;
|
||||||
|
this.#updateVisuals();
|
||||||
|
|
||||||
|
// Wire events
|
||||||
|
this.#titleEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#title = this.#titleEl.value;
|
||||||
|
this.dispatchEvent(new CustomEvent("content-change"));
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#assigneeEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#assignee = this.#assigneeEl.value;
|
||||||
|
this.dispatchEvent(new CustomEvent("content-change"));
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#checkboxEl.addEventListener("change", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#satisfied = this.#checkboxEl.checked;
|
||||||
|
this.#signedBy = this.#satisfied ? (this.#assignee || "anonymous") : "";
|
||||||
|
this.#timestamp = this.#satisfied ? Date.now() : 0;
|
||||||
|
this.#updateVisuals();
|
||||||
|
this.#emitPort();
|
||||||
|
this.dispatchEvent(new CustomEvent("content-change"));
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.querySelector(".close-btn")!.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.dispatchEvent(new CustomEvent("close"));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prevent drag on inputs
|
||||||
|
this.#titleEl.addEventListener("pointerdown", (e) => e.stopPropagation());
|
||||||
|
this.#assigneeEl.addEventListener("pointerdown", (e) => e.stopPropagation());
|
||||||
|
this.#checkboxEl.addEventListener("pointerdown", (e) => e.stopPropagation());
|
||||||
|
|
||||||
|
return root;
|
||||||
|
}
|
||||||
|
|
||||||
|
#updateVisuals() {
|
||||||
|
if (!this.#statusEl) return;
|
||||||
|
if (this.#satisfied) {
|
||||||
|
this.#statusEl.textContent = "SATISFIED";
|
||||||
|
this.#statusEl.className = "status-label satisfied";
|
||||||
|
} else {
|
||||||
|
this.#statusEl.textContent = "WAITING";
|
||||||
|
this.#statusEl.className = "status-label waiting";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#emitPort() {
|
||||||
|
this.setPortValue("gate-out", {
|
||||||
|
satisfied: this.#satisfied,
|
||||||
|
signedBy: this.#signedBy,
|
||||||
|
timestamp: this.#timestamp,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
override toJSON() {
|
||||||
|
return {
|
||||||
|
...super.toJSON(),
|
||||||
|
type: "folk-gov-binary",
|
||||||
|
title: this.#title,
|
||||||
|
assignee: this.#assignee,
|
||||||
|
satisfied: this.#satisfied,
|
||||||
|
signedBy: this.#signedBy,
|
||||||
|
timestamp: this.#timestamp,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
static override fromData(data: Record<string, any>): FolkGovBinary {
|
||||||
|
const shape = FolkShape.fromData.call(this, data) as FolkGovBinary;
|
||||||
|
if (data.title !== undefined) shape.title = data.title;
|
||||||
|
if (data.assignee !== undefined) shape.assignee = data.assignee;
|
||||||
|
if (data.satisfied !== undefined) shape.satisfied = data.satisfied;
|
||||||
|
if (data.signedBy !== undefined) shape.signedBy = data.signedBy;
|
||||||
|
if (data.timestamp !== undefined) shape.timestamp = data.timestamp;
|
||||||
|
return shape;
|
||||||
|
}
|
||||||
|
|
||||||
|
override applyData(data: Record<string, any>): void {
|
||||||
|
super.applyData(data);
|
||||||
|
if (data.title !== undefined && data.title !== this.#title) this.title = data.title;
|
||||||
|
if (data.assignee !== undefined && data.assignee !== this.#assignee) this.assignee = data.assignee;
|
||||||
|
if (data.satisfied !== undefined && data.satisfied !== this.#satisfied) this.satisfied = data.satisfied;
|
||||||
|
if (data.signedBy !== undefined && data.signedBy !== this.#signedBy) this.signedBy = data.signedBy;
|
||||||
|
if (data.timestamp !== undefined && data.timestamp !== this.#timestamp) this.timestamp = data.timestamp;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,518 @@
|
||||||
|
/**
|
||||||
|
* folk-gov-knob — Adjustable Parameter
|
||||||
|
*
|
||||||
|
* An SVG rotary knob (225° sweep) with numeric input fallback.
|
||||||
|
* Optional "temporal viscosity" cooldown delays value propagation.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { FolkShape } from "./folk-shape";
|
||||||
|
import { css, html } from "./tags";
|
||||||
|
import type { PortDescriptor } from "./data-types";
|
||||||
|
|
||||||
|
const HEADER_COLOR = "#b45309";
|
||||||
|
const SWEEP = 225; // degrees
|
||||||
|
const START_ANGLE = (360 - SWEEP) / 2 + 90; // start from bottom-left
|
||||||
|
|
||||||
|
const styles = css`
|
||||||
|
:host {
|
||||||
|
background: var(--rs-bg-surface, #1e293b);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
|
||||||
|
min-width: 160px;
|
||||||
|
min-height: 120px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: ${HEADER_COLOR};
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: move;
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions button {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions button:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-input {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-input::placeholder {
|
||||||
|
color: var(--rs-text-muted, #64748b);
|
||||||
|
}
|
||||||
|
|
||||||
|
.knob-svg {
|
||||||
|
cursor: grab;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.knob-svg:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-input {
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 2px 6px;
|
||||||
|
width: 60px;
|
||||||
|
text-align: center;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--rs-text-muted, #94a3b8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.range-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--rs-text-muted, #64748b);
|
||||||
|
}
|
||||||
|
|
||||||
|
.range-input {
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 3px;
|
||||||
|
color: var(--rs-text-muted, #94a3b8);
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 1px 4px;
|
||||||
|
width: 40px;
|
||||||
|
text-align: center;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cooldown-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--rs-text-muted, #64748b);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cooldown-input {
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 3px;
|
||||||
|
color: var(--rs-text-muted, #94a3b8);
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 1px 4px;
|
||||||
|
width: 36px;
|
||||||
|
text-align: center;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cooldown-active {
|
||||||
|
color: #f59e0b;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"folk-gov-knob": FolkGovKnob;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class FolkGovKnob extends FolkShape {
|
||||||
|
static override tagName = "folk-gov-knob";
|
||||||
|
|
||||||
|
static override portDescriptors: PortDescriptor[] = [
|
||||||
|
{ name: "value-out", type: "number", direction: "output" },
|
||||||
|
];
|
||||||
|
|
||||||
|
static {
|
||||||
|
const sheet = new CSSStyleSheet();
|
||||||
|
const parentRules = Array.from(FolkShape.styles.cssRules).map(r => r.cssText).join("\n");
|
||||||
|
const childRules = Array.from(styles.cssRules).map(r => r.cssText).join("\n");
|
||||||
|
sheet.replaceSync(`${parentRules}\n${childRules}`);
|
||||||
|
this.styles = sheet;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title = "Parameter";
|
||||||
|
#min = 0;
|
||||||
|
#max = 100;
|
||||||
|
#step = 1;
|
||||||
|
#value = 50;
|
||||||
|
#unit = "";
|
||||||
|
#cooldown = 0; // seconds (0 = disabled)
|
||||||
|
#cooldownRemaining = 0;
|
||||||
|
#cooldownTimer: ReturnType<typeof setInterval> | null = null;
|
||||||
|
#pendingValue: number | null = null;
|
||||||
|
|
||||||
|
// DOM refs
|
||||||
|
#titleEl!: HTMLInputElement;
|
||||||
|
#valueEl!: HTMLInputElement;
|
||||||
|
#knobSvg!: SVGSVGElement;
|
||||||
|
#knobArc!: SVGPathElement;
|
||||||
|
#knobDot!: SVGCircleElement;
|
||||||
|
#cooldownRing!: SVGCircleElement;
|
||||||
|
#cooldownLabel!: HTMLElement;
|
||||||
|
|
||||||
|
get title() { return this.#title; }
|
||||||
|
set title(v: string) {
|
||||||
|
this.#title = v;
|
||||||
|
if (this.#titleEl) this.#titleEl.value = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
get min() { return this.#min; }
|
||||||
|
set min(v: number) { this.#min = v; this.#updateKnob(); }
|
||||||
|
|
||||||
|
get max() { return this.#max; }
|
||||||
|
set max(v: number) { this.#max = v; this.#updateKnob(); }
|
||||||
|
|
||||||
|
get step() { return this.#step; }
|
||||||
|
set step(v: number) { this.#step = v; }
|
||||||
|
|
||||||
|
get value() { return this.#value; }
|
||||||
|
set value(v: number) {
|
||||||
|
this.#value = Math.max(this.#min, Math.min(this.#max, v));
|
||||||
|
if (this.#valueEl) this.#valueEl.value = String(this.#value);
|
||||||
|
this.#updateKnob();
|
||||||
|
}
|
||||||
|
|
||||||
|
get unit() { return this.#unit; }
|
||||||
|
set unit(v: string) { this.#unit = v; }
|
||||||
|
|
||||||
|
get cooldown() { return this.#cooldown; }
|
||||||
|
set cooldown(v: number) { this.#cooldown = Math.max(0, v); }
|
||||||
|
|
||||||
|
override createRenderRoot() {
|
||||||
|
const root = super.createRenderRoot();
|
||||||
|
this.initPorts();
|
||||||
|
|
||||||
|
const wrapper = document.createElement("div");
|
||||||
|
wrapper.style.cssText = "width:100%;height:100%;display:flex;flex-direction:column;";
|
||||||
|
wrapper.innerHTML = html`
|
||||||
|
<div class="header" data-drag>
|
||||||
|
<span class="header-title">🎛️ Knob</span>
|
||||||
|
<span class="header-actions">
|
||||||
|
<button class="close-btn">×</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<input class="title-input" type="text" placeholder="Parameter name..." />
|
||||||
|
<svg class="knob-svg" width="80" height="80" viewBox="0 0 80 80">
|
||||||
|
<circle cx="40" cy="40" r="35" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="6" />
|
||||||
|
<circle class="cooldown-ring" cx="40" cy="40" r="35" fill="none" stroke="#f59e0b"
|
||||||
|
stroke-width="6" stroke-dasharray="220" stroke-dashoffset="220"
|
||||||
|
transform="rotate(-90 40 40)" opacity="0.5" />
|
||||||
|
<path class="knob-arc" fill="none" stroke="${HEADER_COLOR}" stroke-width="6" stroke-linecap="round" d="" />
|
||||||
|
<circle class="knob-dot" cx="40" cy="40" r="5" fill="white" />
|
||||||
|
</svg>
|
||||||
|
<div class="value-row">
|
||||||
|
<input class="value-input" type="number" />
|
||||||
|
<span class="unit-label"></span>
|
||||||
|
</div>
|
||||||
|
<div class="range-row">
|
||||||
|
<span>min</span>
|
||||||
|
<input class="range-input min-input" type="number" />
|
||||||
|
<span>max</span>
|
||||||
|
<input class="range-input max-input" type="number" />
|
||||||
|
<span>step</span>
|
||||||
|
<input class="range-input step-input" type="number" min="0.01" />
|
||||||
|
</div>
|
||||||
|
<div class="cooldown-row">
|
||||||
|
<span>cooldown</span>
|
||||||
|
<input class="cooldown-input" type="number" min="0" />
|
||||||
|
<span>s</span>
|
||||||
|
<span class="cooldown-active" style="display:none"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const slot = root.querySelector("slot");
|
||||||
|
const container = slot?.parentElement as HTMLElement;
|
||||||
|
if (container) container.replaceWith(wrapper);
|
||||||
|
|
||||||
|
// Cache refs
|
||||||
|
this.#titleEl = wrapper.querySelector(".title-input") as HTMLInputElement;
|
||||||
|
this.#valueEl = wrapper.querySelector(".value-input") as HTMLInputElement;
|
||||||
|
this.#knobSvg = wrapper.querySelector(".knob-svg") as unknown as SVGSVGElement;
|
||||||
|
this.#knobArc = wrapper.querySelector(".knob-arc") as unknown as SVGPathElement;
|
||||||
|
this.#knobDot = wrapper.querySelector(".knob-dot") as unknown as SVGCircleElement;
|
||||||
|
this.#cooldownRing = wrapper.querySelector(".cooldown-ring") as unknown as SVGCircleElement;
|
||||||
|
this.#cooldownLabel = wrapper.querySelector(".cooldown-active") as HTMLElement;
|
||||||
|
|
||||||
|
const minEl = wrapper.querySelector(".min-input") as HTMLInputElement;
|
||||||
|
const maxEl = wrapper.querySelector(".max-input") as HTMLInputElement;
|
||||||
|
const stepEl = wrapper.querySelector(".step-input") as HTMLInputElement;
|
||||||
|
const cooldownEl = wrapper.querySelector(".cooldown-input") as HTMLInputElement;
|
||||||
|
const unitLabel = wrapper.querySelector(".unit-label") as HTMLElement;
|
||||||
|
|
||||||
|
// Set initial values
|
||||||
|
this.#titleEl.value = this.#title;
|
||||||
|
this.#valueEl.value = String(this.#value);
|
||||||
|
minEl.value = String(this.#min);
|
||||||
|
maxEl.value = String(this.#max);
|
||||||
|
stepEl.value = String(this.#step);
|
||||||
|
cooldownEl.value = String(this.#cooldown);
|
||||||
|
unitLabel.textContent = this.#unit;
|
||||||
|
this.#updateKnob();
|
||||||
|
|
||||||
|
// Wire events
|
||||||
|
const onChange = () => this.dispatchEvent(new CustomEvent("content-change"));
|
||||||
|
|
||||||
|
this.#titleEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#title = this.#titleEl.value;
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#valueEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
const v = parseFloat(this.#valueEl.value);
|
||||||
|
if (!isNaN(v)) this.#setValueWithCooldown(v);
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
minEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#min = parseFloat(minEl.value) || 0;
|
||||||
|
this.#updateKnob();
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
maxEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#max = parseFloat(maxEl.value) || 100;
|
||||||
|
this.#updateKnob();
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
stepEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#step = parseFloat(stepEl.value) || 1;
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
cooldownEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#cooldown = parseFloat(cooldownEl.value) || 0;
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.querySelector(".close-btn")!.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.dispatchEvent(new CustomEvent("close"));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Knob drag interaction
|
||||||
|
let dragging = false;
|
||||||
|
this.#knobSvg.addEventListener("pointerdown", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
dragging = true;
|
||||||
|
(e.target as Element).setPointerCapture(e.pointerId);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#knobSvg.addEventListener("pointermove", (e) => {
|
||||||
|
if (!dragging) return;
|
||||||
|
e.stopPropagation();
|
||||||
|
const rect = this.#knobSvg.getBoundingClientRect();
|
||||||
|
const cx = rect.left + rect.width / 2;
|
||||||
|
const cy = rect.top + rect.height / 2;
|
||||||
|
let angle = Math.atan2(e.clientY - cy, e.clientX - cx) * (180 / Math.PI);
|
||||||
|
angle = (angle + 360) % 360;
|
||||||
|
// Map angle to value
|
||||||
|
const startA = START_ANGLE;
|
||||||
|
let relAngle = (angle - startA + 360) % 360;
|
||||||
|
if (relAngle > SWEEP) relAngle = relAngle > SWEEP + (360 - SWEEP) / 2 ? 0 : SWEEP;
|
||||||
|
const ratio = relAngle / SWEEP;
|
||||||
|
let v = this.#min + ratio * (this.#max - this.#min);
|
||||||
|
// Snap to step
|
||||||
|
v = Math.round(v / this.#step) * this.#step;
|
||||||
|
v = Math.max(this.#min, Math.min(this.#max, v));
|
||||||
|
this.#setValueWithCooldown(v);
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#knobSvg.addEventListener("pointerup", (e) => {
|
||||||
|
dragging = false;
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prevent drag on all inputs
|
||||||
|
for (const el of wrapper.querySelectorAll("input, button")) {
|
||||||
|
el.addEventListener("pointerdown", (e) => e.stopPropagation());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Emit initial value
|
||||||
|
this.#emitPort();
|
||||||
|
|
||||||
|
return root;
|
||||||
|
}
|
||||||
|
|
||||||
|
#setValueWithCooldown(v: number) {
|
||||||
|
v = Math.max(this.#min, Math.min(this.#max, v));
|
||||||
|
this.#value = v;
|
||||||
|
if (this.#valueEl) this.#valueEl.value = String(v);
|
||||||
|
this.#updateKnob();
|
||||||
|
|
||||||
|
if (this.#cooldown > 0) {
|
||||||
|
this.#pendingValue = v;
|
||||||
|
if (!this.#cooldownTimer) {
|
||||||
|
this.#cooldownRemaining = this.#cooldown;
|
||||||
|
this.#cooldownLabel.style.display = "";
|
||||||
|
this.#cooldownLabel.textContent = `${this.#cooldownRemaining}s`;
|
||||||
|
this.#updateCooldownRing();
|
||||||
|
this.#cooldownTimer = setInterval(() => {
|
||||||
|
this.#cooldownRemaining--;
|
||||||
|
if (this.#cooldownRemaining <= 0) {
|
||||||
|
clearInterval(this.#cooldownTimer!);
|
||||||
|
this.#cooldownTimer = null;
|
||||||
|
this.#cooldownLabel.style.display = "none";
|
||||||
|
this.#cooldownRing.setAttribute("stroke-dashoffset", "220");
|
||||||
|
if (this.#pendingValue !== null) {
|
||||||
|
this.#emitPort();
|
||||||
|
this.#pendingValue = null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.#cooldownLabel.textContent = `${this.#cooldownRemaining}s`;
|
||||||
|
this.#updateCooldownRing();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
// Reset countdown
|
||||||
|
this.#cooldownRemaining = this.#cooldown;
|
||||||
|
this.#cooldownLabel.textContent = `${this.#cooldownRemaining}s`;
|
||||||
|
this.#updateCooldownRing();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.#emitPort();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#updateCooldownRing() {
|
||||||
|
if (!this.#cooldownRing || this.#cooldown <= 0) return;
|
||||||
|
const circumference = 220; // 2 * π * 35
|
||||||
|
const progress = this.#cooldownRemaining / this.#cooldown;
|
||||||
|
this.#cooldownRing.setAttribute("stroke-dashoffset", String(circumference * (1 - progress)));
|
||||||
|
}
|
||||||
|
|
||||||
|
#updateKnob() {
|
||||||
|
if (!this.#knobArc || !this.#knobDot) return;
|
||||||
|
const range = this.#max - this.#min;
|
||||||
|
const ratio = range > 0 ? (this.#value - this.#min) / range : 0;
|
||||||
|
const endAngle = START_ANGLE + ratio * SWEEP;
|
||||||
|
|
||||||
|
// Arc path
|
||||||
|
const r = 35;
|
||||||
|
const cx = 40;
|
||||||
|
const cy = 40;
|
||||||
|
const startRad = (START_ANGLE * Math.PI) / 180;
|
||||||
|
const endRad = (endAngle * Math.PI) / 180;
|
||||||
|
const x1 = cx + r * Math.cos(startRad);
|
||||||
|
const y1 = cy + r * Math.sin(startRad);
|
||||||
|
const x2 = cx + r * Math.cos(endRad);
|
||||||
|
const y2 = cy + r * Math.sin(endRad);
|
||||||
|
const largeArc = ratio * SWEEP > 180 ? 1 : 0;
|
||||||
|
|
||||||
|
if (ratio > 0.001) {
|
||||||
|
this.#knobArc.setAttribute("d", `M ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2}`);
|
||||||
|
} else {
|
||||||
|
this.#knobArc.setAttribute("d", "");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dot position
|
||||||
|
this.#knobDot.setAttribute("cx", String(x2));
|
||||||
|
this.#knobDot.setAttribute("cy", String(y2));
|
||||||
|
}
|
||||||
|
|
||||||
|
#emitPort() {
|
||||||
|
this.setPortValue("value-out", this.#value);
|
||||||
|
}
|
||||||
|
|
||||||
|
override disconnectedCallback() {
|
||||||
|
super.disconnectedCallback();
|
||||||
|
if (this.#cooldownTimer) {
|
||||||
|
clearInterval(this.#cooldownTimer);
|
||||||
|
this.#cooldownTimer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
override toJSON() {
|
||||||
|
return {
|
||||||
|
...super.toJSON(),
|
||||||
|
type: "folk-gov-knob",
|
||||||
|
title: this.#title,
|
||||||
|
min: this.#min,
|
||||||
|
max: this.#max,
|
||||||
|
step: this.#step,
|
||||||
|
value: this.#value,
|
||||||
|
unit: this.#unit,
|
||||||
|
cooldown: this.#cooldown,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
static override fromData(data: Record<string, any>): FolkGovKnob {
|
||||||
|
const shape = FolkShape.fromData.call(this, data) as FolkGovKnob;
|
||||||
|
if (data.title !== undefined) shape.title = data.title;
|
||||||
|
if (data.min !== undefined) shape.min = data.min;
|
||||||
|
if (data.max !== undefined) shape.max = data.max;
|
||||||
|
if (data.step !== undefined) shape.step = data.step;
|
||||||
|
if (data.value !== undefined) shape.value = data.value;
|
||||||
|
if (data.unit !== undefined) shape.unit = data.unit;
|
||||||
|
if (data.cooldown !== undefined) shape.cooldown = data.cooldown;
|
||||||
|
return shape;
|
||||||
|
}
|
||||||
|
|
||||||
|
override applyData(data: Record<string, any>): void {
|
||||||
|
super.applyData(data);
|
||||||
|
if (data.title !== undefined && data.title !== this.#title) this.title = data.title;
|
||||||
|
if (data.min !== undefined && data.min !== this.#min) this.min = data.min;
|
||||||
|
if (data.max !== undefined && data.max !== this.#max) this.max = data.max;
|
||||||
|
if (data.step !== undefined && data.step !== this.#step) this.step = data.step;
|
||||||
|
if (data.value !== undefined && data.value !== this.#value) this.value = data.value;
|
||||||
|
if (data.unit !== undefined && data.unit !== this.#unit) this.unit = data.unit;
|
||||||
|
if (data.cooldown !== undefined && data.cooldown !== this.#cooldown) this.cooldown = data.cooldown;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,456 @@
|
||||||
|
/**
|
||||||
|
* folk-gov-project — Circuit Aggregator
|
||||||
|
*
|
||||||
|
* Traverses the arrow graph backward from itself to discover all upstream
|
||||||
|
* governance gates. Shows "X of Y gates satisfied" with a progress bar
|
||||||
|
* and requirement checklist. Auto-detects completion.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { FolkShape } from "./folk-shape";
|
||||||
|
import { css, html } from "./tags";
|
||||||
|
import type { PortDescriptor } from "./data-types";
|
||||||
|
|
||||||
|
const HEADER_COLOR = "#1d4ed8";
|
||||||
|
const GOV_TAG_NAMES = new Set([
|
||||||
|
"FOLK-GOV-BINARY",
|
||||||
|
"FOLK-GOV-THRESHOLD",
|
||||||
|
"FOLK-GOV-KNOB",
|
||||||
|
"FOLK-GOV-AMENDMENT",
|
||||||
|
]);
|
||||||
|
|
||||||
|
type ProjectStatus = "draft" | "active" | "completed" | "archived";
|
||||||
|
|
||||||
|
interface GateInfo {
|
||||||
|
id: string;
|
||||||
|
tagName: string;
|
||||||
|
title: string;
|
||||||
|
satisfied: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = css`
|
||||||
|
:host {
|
||||||
|
background: var(--rs-bg-surface, #1e293b);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
|
||||||
|
min-width: 280px;
|
||||||
|
min-height: 180px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: ${HEADER_COLOR};
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: move;
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions button {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions button:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 12px;
|
||||||
|
gap: 8px;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: calc(100% - 36px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-input {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
width: 100%;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-input::placeholder {
|
||||||
|
color: var(--rs-text-muted, #64748b);
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc-input {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--rs-text-secondary, #cbd5e1);
|
||||||
|
font-size: 11px;
|
||||||
|
width: 100%;
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
min-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc-input::placeholder {
|
||||||
|
color: var(--rs-text-muted, #475569);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-select {
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 3px 6px;
|
||||||
|
outline: none;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-section {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-summary {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-wrap {
|
||||||
|
position: relative;
|
||||||
|
height: 16px;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: width 0.3s, background 0.3s;
|
||||||
|
background: ${HEADER_COLOR};
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar.complete {
|
||||||
|
background: #22c55e;
|
||||||
|
box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 3px;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--rs-text-secondary, #94a3b8);
|
||||||
|
padding: 3px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-item.satisfied {
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-icon {
|
||||||
|
width: 14px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-gates {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--rs-text-muted, #475569);
|
||||||
|
font-style: italic;
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"folk-gov-project": FolkGovProject;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class FolkGovProject extends FolkShape {
|
||||||
|
static override tagName = "folk-gov-project";
|
||||||
|
|
||||||
|
static override portDescriptors: PortDescriptor[] = [
|
||||||
|
{ name: "circuit-out", type: "json", direction: "output" },
|
||||||
|
];
|
||||||
|
|
||||||
|
static {
|
||||||
|
const sheet = new CSSStyleSheet();
|
||||||
|
const parentRules = Array.from(FolkShape.styles.cssRules).map(r => r.cssText).join("\n");
|
||||||
|
const childRules = Array.from(styles.cssRules).map(r => r.cssText).join("\n");
|
||||||
|
sheet.replaceSync(`${parentRules}\n${childRules}`);
|
||||||
|
this.styles = sheet;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title = "Project";
|
||||||
|
#description = "";
|
||||||
|
#status: ProjectStatus = "draft";
|
||||||
|
#pollInterval: ReturnType<typeof setInterval> | null = null;
|
||||||
|
|
||||||
|
// DOM refs
|
||||||
|
#titleEl!: HTMLInputElement;
|
||||||
|
#descEl!: HTMLTextAreaElement;
|
||||||
|
#statusEl!: HTMLSelectElement;
|
||||||
|
#summaryEl!: HTMLElement;
|
||||||
|
#progressBar!: HTMLElement;
|
||||||
|
#checklistEl!: HTMLElement;
|
||||||
|
|
||||||
|
get title() { return this.#title; }
|
||||||
|
set title(v: string) {
|
||||||
|
this.#title = v;
|
||||||
|
if (this.#titleEl) this.#titleEl.value = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
get description() { return this.#description; }
|
||||||
|
set description(v: string) {
|
||||||
|
this.#description = v;
|
||||||
|
if (this.#descEl) this.#descEl.value = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
get status(): ProjectStatus { return this.#status; }
|
||||||
|
set status(v: ProjectStatus) {
|
||||||
|
this.#status = v;
|
||||||
|
if (this.#statusEl) this.#statusEl.value = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
override createRenderRoot() {
|
||||||
|
const root = super.createRenderRoot();
|
||||||
|
this.initPorts();
|
||||||
|
|
||||||
|
const wrapper = document.createElement("div");
|
||||||
|
wrapper.style.cssText = "width:100%;height:100%;display:flex;flex-direction:column;";
|
||||||
|
wrapper.innerHTML = html`
|
||||||
|
<div class="header" data-drag>
|
||||||
|
<span class="header-title">🏗️ Project</span>
|
||||||
|
<span class="header-actions">
|
||||||
|
<button class="close-btn">×</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<input class="title-input" type="text" placeholder="Project title..." />
|
||||||
|
<textarea class="desc-input" placeholder="Description..." rows="2"></textarea>
|
||||||
|
<select class="status-select">
|
||||||
|
<option value="draft">Draft</option>
|
||||||
|
<option value="active">Active</option>
|
||||||
|
<option value="completed">Completed</option>
|
||||||
|
<option value="archived">Archived</option>
|
||||||
|
</select>
|
||||||
|
<div class="progress-section">
|
||||||
|
<div class="progress-summary">
|
||||||
|
<span class="summary-text">0 of 0 gates</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-wrap">
|
||||||
|
<div class="progress-bar" style="width: 0%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="checklist"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const slot = root.querySelector("slot");
|
||||||
|
const container = slot?.parentElement as HTMLElement;
|
||||||
|
if (container) container.replaceWith(wrapper);
|
||||||
|
|
||||||
|
// Cache refs
|
||||||
|
this.#titleEl = wrapper.querySelector(".title-input") as HTMLInputElement;
|
||||||
|
this.#descEl = wrapper.querySelector(".desc-input") as HTMLTextAreaElement;
|
||||||
|
this.#statusEl = wrapper.querySelector(".status-select") as HTMLSelectElement;
|
||||||
|
this.#summaryEl = wrapper.querySelector(".summary-text") as HTMLElement;
|
||||||
|
this.#progressBar = wrapper.querySelector(".progress-bar") as HTMLElement;
|
||||||
|
this.#checklistEl = wrapper.querySelector(".checklist") as HTMLElement;
|
||||||
|
|
||||||
|
// Set initial values
|
||||||
|
this.#titleEl.value = this.#title;
|
||||||
|
this.#descEl.value = this.#description;
|
||||||
|
this.#statusEl.value = this.#status;
|
||||||
|
|
||||||
|
// Wire events
|
||||||
|
const onChange = () => this.dispatchEvent(new CustomEvent("content-change"));
|
||||||
|
|
||||||
|
this.#titleEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#title = this.#titleEl.value;
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#descEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#description = this.#descEl.value;
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#statusEl.addEventListener("change", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#status = this.#statusEl.value as ProjectStatus;
|
||||||
|
onChange();
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.querySelector(".close-btn")!.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.dispatchEvent(new CustomEvent("close"));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prevent drag on inputs
|
||||||
|
for (const el of wrapper.querySelectorAll("input, textarea, select, button")) {
|
||||||
|
el.addEventListener("pointerdown", (e) => e.stopPropagation());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Poll upstream gates every 2 seconds (pull-based)
|
||||||
|
this.#pollInterval = setInterval(() => this.#scanUpstreamGates(), 2000);
|
||||||
|
// Also scan immediately
|
||||||
|
requestAnimationFrame(() => this.#scanUpstreamGates());
|
||||||
|
|
||||||
|
return root;
|
||||||
|
}
|
||||||
|
|
||||||
|
override disconnectedCallback() {
|
||||||
|
super.disconnectedCallback();
|
||||||
|
if (this.#pollInterval) {
|
||||||
|
clearInterval(this.#pollInterval);
|
||||||
|
this.#pollInterval = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Walk the arrow graph backward from this shape to find all upstream
|
||||||
|
* governance gates. Returns GateInfo[] for each discovered gate.
|
||||||
|
*/
|
||||||
|
#scanUpstreamGates(): void {
|
||||||
|
const gates: GateInfo[] = [];
|
||||||
|
const visited = new Set<string>();
|
||||||
|
const queue: string[] = [this.id];
|
||||||
|
|
||||||
|
// Find all arrows in the document
|
||||||
|
const arrows = document.querySelectorAll("folk-arrow");
|
||||||
|
|
||||||
|
while (queue.length > 0) {
|
||||||
|
const currentId = queue.shift()!;
|
||||||
|
if (visited.has(currentId)) continue;
|
||||||
|
visited.add(currentId);
|
||||||
|
|
||||||
|
// Find arrows targeting this shape
|
||||||
|
for (const arrow of arrows) {
|
||||||
|
const a = arrow as any;
|
||||||
|
if (a.targetId === currentId) {
|
||||||
|
const sourceId = a.sourceId;
|
||||||
|
if (!sourceId || visited.has(sourceId)) continue;
|
||||||
|
|
||||||
|
const sourceEl = document.getElementById(sourceId) as any;
|
||||||
|
if (!sourceEl) continue;
|
||||||
|
|
||||||
|
const tagName = sourceEl.tagName?.toUpperCase();
|
||||||
|
if (GOV_TAG_NAMES.has(tagName)) {
|
||||||
|
const portVal = sourceEl.getPortValue?.("gate-out");
|
||||||
|
gates.push({
|
||||||
|
id: sourceId,
|
||||||
|
tagName,
|
||||||
|
title: sourceEl.title || sourceEl.getAttribute?.("title") || tagName,
|
||||||
|
satisfied: portVal?.satisfied === true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
queue.push(sourceId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.#renderGates(gates);
|
||||||
|
}
|
||||||
|
|
||||||
|
#renderGates(gates: GateInfo[]) {
|
||||||
|
const total = gates.length;
|
||||||
|
const completed = gates.filter(g => g.satisfied).length;
|
||||||
|
const pct = total > 0 ? (completed / total) * 100 : 0;
|
||||||
|
const allDone = total > 0 && completed === total;
|
||||||
|
|
||||||
|
// Auto-detect completion
|
||||||
|
if (allDone && this.#status === "active") {
|
||||||
|
this.#status = "completed";
|
||||||
|
if (this.#statusEl) this.#statusEl.value = "completed";
|
||||||
|
this.dispatchEvent(new CustomEvent("content-change"));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.#summaryEl) {
|
||||||
|
this.#summaryEl.textContent = `${completed} of ${total} gates`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.#progressBar) {
|
||||||
|
this.#progressBar.style.width = `${pct}%`;
|
||||||
|
this.#progressBar.classList.toggle("complete", allDone);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.#checklistEl) {
|
||||||
|
if (total === 0) {
|
||||||
|
this.#checklistEl.innerHTML = `<div class="no-gates">Connect gov gates upstream to track progress</div>`;
|
||||||
|
} else {
|
||||||
|
this.#checklistEl.innerHTML = gates.map(g => {
|
||||||
|
const icon = g.satisfied ? "✓" : "○";
|
||||||
|
const cls = g.satisfied ? "check-item satisfied" : "check-item";
|
||||||
|
const typeLabel = g.tagName.replace("FOLK-GOV-", "").toLowerCase();
|
||||||
|
return `<div class="${cls}"><span class="check-icon">${icon}</span><span>${g.title} <small>(${typeLabel})</small></span></div>`;
|
||||||
|
}).join("");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Emit port
|
||||||
|
this.setPortValue("circuit-out", {
|
||||||
|
status: this.#status,
|
||||||
|
completedGates: completed,
|
||||||
|
totalGates: total,
|
||||||
|
percentage: pct,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
override toJSON() {
|
||||||
|
return {
|
||||||
|
...super.toJSON(),
|
||||||
|
type: "folk-gov-project",
|
||||||
|
title: this.#title,
|
||||||
|
description: this.#description,
|
||||||
|
status: this.#status,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
static override fromData(data: Record<string, any>): FolkGovProject {
|
||||||
|
const shape = FolkShape.fromData.call(this, data) as FolkGovProject;
|
||||||
|
if (data.title !== undefined) shape.title = data.title;
|
||||||
|
if (data.description !== undefined) shape.description = data.description;
|
||||||
|
if (data.status !== undefined) shape.status = data.status;
|
||||||
|
return shape;
|
||||||
|
}
|
||||||
|
|
||||||
|
override applyData(data: Record<string, any>): void {
|
||||||
|
super.applyData(data);
|
||||||
|
if (data.title !== undefined && data.title !== this.#title) this.title = data.title;
|
||||||
|
if (data.description !== undefined && data.description !== this.#description) this.description = data.description;
|
||||||
|
if (data.status !== undefined && data.status !== this.#status) this.status = data.status;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,478 @@
|
||||||
|
/**
|
||||||
|
* folk-gov-threshold — Numeric Progress Gate
|
||||||
|
*
|
||||||
|
* Tracks contributions toward a target value. Shows a progress bar,
|
||||||
|
* turns green when target is met. Accepts contributions via input port
|
||||||
|
* or direct UI. Target can be dynamically set via knob input port.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { FolkShape } from "./folk-shape";
|
||||||
|
import { css, html } from "./tags";
|
||||||
|
import type { PortDescriptor } from "./data-types";
|
||||||
|
|
||||||
|
const HEADER_COLOR = "#0891b2";
|
||||||
|
|
||||||
|
interface Contribution {
|
||||||
|
who: string;
|
||||||
|
amount: number;
|
||||||
|
timestamp: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = css`
|
||||||
|
:host {
|
||||||
|
background: var(--rs-bg-surface, #1e293b);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
|
||||||
|
min-width: 220px;
|
||||||
|
min-height: 100px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: ${HEADER_COLOR};
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: move;
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions button {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions button:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 12px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-input {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
width: 100%;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-input::placeholder {
|
||||||
|
color: var(--rs-text-muted, #64748b);
|
||||||
|
}
|
||||||
|
|
||||||
|
.target-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--rs-text-muted, #94a3b8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.target-input, .unit-input {
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.target-input {
|
||||||
|
width: 60px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit-input {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-wrap {
|
||||||
|
position: relative;
|
||||||
|
height: 20px;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: width 0.3s, background 0.3s;
|
||||||
|
background: ${HEADER_COLOR};
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar.complete {
|
||||||
|
background: #22c55e;
|
||||||
|
box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-label {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contribute-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contrib-name, .contrib-amount {
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--rs-text-primary, #e2e8f0);
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 3px 6px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contrib-name {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contrib-amount {
|
||||||
|
width: 50px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contrib-btn {
|
||||||
|
background: ${HEADER_COLOR};
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 3px 8px;
|
||||||
|
font-size: 11px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contrib-btn:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contributions-list {
|
||||||
|
max-height: 80px;
|
||||||
|
overflow-y: auto;
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--rs-text-muted, #94a3b8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contrib-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 2px 0;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-label {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-label.satisfied {
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-label.waiting {
|
||||||
|
color: #f59e0b;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"folk-gov-threshold": FolkGovThreshold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class FolkGovThreshold extends FolkShape {
|
||||||
|
static override tagName = "folk-gov-threshold";
|
||||||
|
|
||||||
|
static override portDescriptors: PortDescriptor[] = [
|
||||||
|
{ name: "contribution-in", type: "json", direction: "input" },
|
||||||
|
{ name: "target-in", type: "number", direction: "input" },
|
||||||
|
{ name: "gate-out", type: "json", direction: "output" },
|
||||||
|
];
|
||||||
|
|
||||||
|
static {
|
||||||
|
const sheet = new CSSStyleSheet();
|
||||||
|
const parentRules = Array.from(FolkShape.styles.cssRules).map(r => r.cssText).join("\n");
|
||||||
|
const childRules = Array.from(styles.cssRules).map(r => r.cssText).join("\n");
|
||||||
|
sheet.replaceSync(`${parentRules}\n${childRules}`);
|
||||||
|
this.styles = sheet;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title = "Threshold";
|
||||||
|
#target = 100;
|
||||||
|
#unit = "$";
|
||||||
|
#contributions: Contribution[] = [];
|
||||||
|
|
||||||
|
// DOM refs
|
||||||
|
#titleEl!: HTMLInputElement;
|
||||||
|
#targetEl!: HTMLInputElement;
|
||||||
|
#unitEl!: HTMLInputElement;
|
||||||
|
#progressBar!: HTMLElement;
|
||||||
|
#progressLabel!: HTMLElement;
|
||||||
|
#contribList!: HTMLElement;
|
||||||
|
#statusEl!: HTMLElement;
|
||||||
|
#contribNameEl!: HTMLInputElement;
|
||||||
|
#contribAmountEl!: HTMLInputElement;
|
||||||
|
|
||||||
|
get title() { return this.#title; }
|
||||||
|
set title(v: string) {
|
||||||
|
this.#title = v;
|
||||||
|
if (this.#titleEl) this.#titleEl.value = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
get target() { return this.#target; }
|
||||||
|
set target(v: number) {
|
||||||
|
this.#target = v;
|
||||||
|
if (this.#targetEl) this.#targetEl.value = String(v);
|
||||||
|
this.#updateVisuals();
|
||||||
|
this.#emitPort();
|
||||||
|
}
|
||||||
|
|
||||||
|
get unit() { return this.#unit; }
|
||||||
|
set unit(v: string) {
|
||||||
|
this.#unit = v;
|
||||||
|
if (this.#unitEl) this.#unitEl.value = v;
|
||||||
|
this.#updateVisuals();
|
||||||
|
}
|
||||||
|
|
||||||
|
get contributions(): Contribution[] { return [...this.#contributions]; }
|
||||||
|
set contributions(v: Contribution[]) {
|
||||||
|
this.#contributions = v;
|
||||||
|
this.#updateVisuals();
|
||||||
|
this.#emitPort();
|
||||||
|
}
|
||||||
|
|
||||||
|
get #current(): number {
|
||||||
|
return this.#contributions.reduce((sum, c) => sum + c.amount, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
get #percentage(): number {
|
||||||
|
return this.#target > 0 ? Math.min(100, (this.#current / this.#target) * 100) : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
get #isSatisfied(): boolean {
|
||||||
|
return this.#current >= this.#target;
|
||||||
|
}
|
||||||
|
|
||||||
|
override createRenderRoot() {
|
||||||
|
const root = super.createRenderRoot();
|
||||||
|
this.initPorts();
|
||||||
|
|
||||||
|
const wrapper = document.createElement("div");
|
||||||
|
wrapper.style.cssText = "width:100%;height:100%;display:flex;flex-direction:column;";
|
||||||
|
wrapper.innerHTML = html`
|
||||||
|
<div class="header" data-drag>
|
||||||
|
<span class="header-title">📊 Threshold</span>
|
||||||
|
<span class="header-actions">
|
||||||
|
<button class="close-btn">×</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<input class="title-input" type="text" placeholder="Threshold title..." />
|
||||||
|
<div class="target-row">
|
||||||
|
<span>Target:</span>
|
||||||
|
<input class="target-input" type="number" min="0" />
|
||||||
|
<input class="unit-input" type="text" placeholder="unit" />
|
||||||
|
</div>
|
||||||
|
<div class="progress-wrap">
|
||||||
|
<div class="progress-bar" style="width: 0%"></div>
|
||||||
|
<div class="progress-label">0 / 100</div>
|
||||||
|
</div>
|
||||||
|
<div class="contribute-row">
|
||||||
|
<input class="contrib-name" type="text" placeholder="Name" />
|
||||||
|
<input class="contrib-amount" type="number" placeholder="0" min="0" />
|
||||||
|
<button class="contrib-btn">+</button>
|
||||||
|
</div>
|
||||||
|
<div class="contributions-list"></div>
|
||||||
|
<span class="status-label waiting">WAITING</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const slot = root.querySelector("slot");
|
||||||
|
const container = slot?.parentElement as HTMLElement;
|
||||||
|
if (container) container.replaceWith(wrapper);
|
||||||
|
|
||||||
|
// Cache refs
|
||||||
|
this.#titleEl = wrapper.querySelector(".title-input") as HTMLInputElement;
|
||||||
|
this.#targetEl = wrapper.querySelector(".target-input") as HTMLInputElement;
|
||||||
|
this.#unitEl = wrapper.querySelector(".unit-input") as HTMLInputElement;
|
||||||
|
this.#progressBar = wrapper.querySelector(".progress-bar") as HTMLElement;
|
||||||
|
this.#progressLabel = wrapper.querySelector(".progress-label") as HTMLElement;
|
||||||
|
this.#contribList = wrapper.querySelector(".contributions-list") as HTMLElement;
|
||||||
|
this.#statusEl = wrapper.querySelector(".status-label") as HTMLElement;
|
||||||
|
this.#contribNameEl = wrapper.querySelector(".contrib-name") as HTMLInputElement;
|
||||||
|
this.#contribAmountEl = wrapper.querySelector(".contrib-amount") as HTMLInputElement;
|
||||||
|
|
||||||
|
// Set initial values
|
||||||
|
this.#titleEl.value = this.#title;
|
||||||
|
this.#targetEl.value = String(this.#target);
|
||||||
|
this.#unitEl.value = this.#unit;
|
||||||
|
this.#updateVisuals();
|
||||||
|
|
||||||
|
// Wire events
|
||||||
|
this.#titleEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#title = this.#titleEl.value;
|
||||||
|
this.dispatchEvent(new CustomEvent("content-change"));
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#targetEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#target = parseFloat(this.#targetEl.value) || 0;
|
||||||
|
this.#updateVisuals();
|
||||||
|
this.#emitPort();
|
||||||
|
this.dispatchEvent(new CustomEvent("content-change"));
|
||||||
|
});
|
||||||
|
|
||||||
|
this.#unitEl.addEventListener("input", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.#unit = this.#unitEl.value;
|
||||||
|
this.#updateVisuals();
|
||||||
|
this.dispatchEvent(new CustomEvent("content-change"));
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.querySelector(".contrib-btn")!.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
const who = this.#contribNameEl.value.trim() || "anonymous";
|
||||||
|
const amount = parseFloat(this.#contribAmountEl.value) || 0;
|
||||||
|
if (amount <= 0) return;
|
||||||
|
this.#contributions.push({ who, amount, timestamp: Date.now() });
|
||||||
|
this.#contribNameEl.value = "";
|
||||||
|
this.#contribAmountEl.value = "";
|
||||||
|
this.#updateVisuals();
|
||||||
|
this.#emitPort();
|
||||||
|
this.dispatchEvent(new CustomEvent("content-change"));
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.querySelector(".close-btn")!.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.dispatchEvent(new CustomEvent("close"));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prevent drag on inputs
|
||||||
|
for (const el of wrapper.querySelectorAll("input, button")) {
|
||||||
|
el.addEventListener("pointerdown", (e) => e.stopPropagation());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle input ports
|
||||||
|
this.addEventListener("port-value-changed", ((e: CustomEvent) => {
|
||||||
|
const { name, value } = e.detail;
|
||||||
|
if (name === "contribution-in" && value && typeof value === "object") {
|
||||||
|
const c = value as any;
|
||||||
|
this.#contributions.push({
|
||||||
|
who: c.who || c.memberName || "anonymous",
|
||||||
|
amount: c.amount || c.hours || 0,
|
||||||
|
timestamp: c.timestamp || Date.now(),
|
||||||
|
});
|
||||||
|
this.#updateVisuals();
|
||||||
|
this.#emitPort();
|
||||||
|
this.dispatchEvent(new CustomEvent("content-change"));
|
||||||
|
}
|
||||||
|
if (name === "target-in" && typeof value === "number") {
|
||||||
|
this.#target = value;
|
||||||
|
if (this.#targetEl) this.#targetEl.value = String(value);
|
||||||
|
this.#updateVisuals();
|
||||||
|
this.#emitPort();
|
||||||
|
this.dispatchEvent(new CustomEvent("content-change"));
|
||||||
|
}
|
||||||
|
}) as EventListener);
|
||||||
|
|
||||||
|
return root;
|
||||||
|
}
|
||||||
|
|
||||||
|
#updateVisuals() {
|
||||||
|
if (!this.#progressBar) return;
|
||||||
|
const pct = this.#percentage;
|
||||||
|
const current = this.#current;
|
||||||
|
const satisfied = this.#isSatisfied;
|
||||||
|
|
||||||
|
this.#progressBar.style.width = `${pct}%`;
|
||||||
|
this.#progressBar.classList.toggle("complete", satisfied);
|
||||||
|
this.#progressLabel.textContent = `${current} / ${this.#target} ${this.#unit}`;
|
||||||
|
|
||||||
|
if (this.#statusEl) {
|
||||||
|
this.#statusEl.textContent = satisfied ? "SATISFIED" : "WAITING";
|
||||||
|
this.#statusEl.className = `status-label ${satisfied ? "satisfied" : "waiting"}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render contributions list
|
||||||
|
if (this.#contribList) {
|
||||||
|
this.#contribList.innerHTML = this.#contributions.map(c =>
|
||||||
|
`<div class="contrib-item"><span>${c.who}</span><span>${c.amount} ${this.#unit}</span></div>`
|
||||||
|
).join("");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#emitPort() {
|
||||||
|
this.setPortValue("gate-out", {
|
||||||
|
satisfied: this.#isSatisfied,
|
||||||
|
current: this.#current,
|
||||||
|
target: this.#target,
|
||||||
|
percentage: this.#percentage,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
override toJSON() {
|
||||||
|
return {
|
||||||
|
...super.toJSON(),
|
||||||
|
type: "folk-gov-threshold",
|
||||||
|
title: this.#title,
|
||||||
|
target: this.#target,
|
||||||
|
unit: this.#unit,
|
||||||
|
contributions: this.#contributions,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
static override fromData(data: Record<string, any>): FolkGovThreshold {
|
||||||
|
const shape = FolkShape.fromData.call(this, data) as FolkGovThreshold;
|
||||||
|
if (data.title !== undefined) shape.title = data.title;
|
||||||
|
if (data.target !== undefined) shape.target = data.target;
|
||||||
|
if (data.unit !== undefined) shape.unit = data.unit;
|
||||||
|
if (data.contributions !== undefined) shape.contributions = data.contributions;
|
||||||
|
return shape;
|
||||||
|
}
|
||||||
|
|
||||||
|
override applyData(data: Record<string, any>): void {
|
||||||
|
super.applyData(data);
|
||||||
|
if (data.title !== undefined && data.title !== this.#title) this.title = data.title;
|
||||||
|
if (data.target !== undefined && data.target !== this.#target) this.target = data.target;
|
||||||
|
if (data.unit !== undefined && data.unit !== this.#unit) this.unit = data.unit;
|
||||||
|
if (data.contributions !== undefined) this.contributions = data.contributions;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -81,6 +81,13 @@ export * from "./folk-social-thread";
|
||||||
export * from "./folk-social-campaign";
|
export * from "./folk-social-campaign";
|
||||||
export * from "./folk-social-newsletter";
|
export * from "./folk-social-newsletter";
|
||||||
|
|
||||||
|
// rGov Governance Circuit Shapes
|
||||||
|
export * from "./folk-gov-binary";
|
||||||
|
export * from "./folk-gov-threshold";
|
||||||
|
export * from "./folk-gov-knob";
|
||||||
|
export * from "./folk-gov-project";
|
||||||
|
export * from "./folk-gov-amendment";
|
||||||
|
|
||||||
// Decision/Choice Shapes
|
// Decision/Choice Shapes
|
||||||
export * from "./folk-choice-vote";
|
export * from "./folk-choice-vote";
|
||||||
export * from "./folk-choice-rank";
|
export * from "./folk-choice-rank";
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
/**
|
||||||
|
* rGov module — Multiplayer governance decision circuits.
|
||||||
|
*
|
||||||
|
* Visual circuit builder where people assemble governance decision-making
|
||||||
|
* systems from drag-and-drop components: binary gates, thresholds, knobs,
|
||||||
|
* projects, and amendments.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Hono } from "hono";
|
||||||
|
import { renderShell } from "../../server/shell";
|
||||||
|
import { getModuleInfoList } from "../../shared/module";
|
||||||
|
import type { RSpaceModule } from "../../shared/module";
|
||||||
|
|
||||||
|
const routes = new Hono();
|
||||||
|
|
||||||
|
// ── Landing page ──
|
||||||
|
|
||||||
|
routes.get("/", (c) => {
|
||||||
|
const space = c.req.param("space") || "demo";
|
||||||
|
|
||||||
|
return c.html(renderShell({
|
||||||
|
title: `${space} — rGov | rSpace`,
|
||||||
|
moduleId: "rgov",
|
||||||
|
spaceSlug: space,
|
||||||
|
modules: getModuleInfoList(),
|
||||||
|
theme: "dark",
|
||||||
|
body: `
|
||||||
|
<div style="max-width:640px;margin:60px auto;padding:0 24px;color:#e2e8f0;font-family:system-ui,sans-serif;">
|
||||||
|
<h1 style="font-size:28px;margin-bottom:8px;">⚖️ rGov</h1>
|
||||||
|
<p style="color:#94a3b8;margin-bottom:24px;">Multiplayer governance decision circuits</p>
|
||||||
|
<p style="color:#cbd5e1;line-height:1.6;margin-bottom:16px;">
|
||||||
|
Build decision-making systems by wiring together governance components on the canvas:
|
||||||
|
</p>
|
||||||
|
<ul style="color:#cbd5e1;line-height:1.8;margin-bottom:24px;padding-left:20px;">
|
||||||
|
<li><strong>Binary Gates</strong> — Yes/No signoff checkpoints</li>
|
||||||
|
<li><strong>Thresholds</strong> — Numeric targets (hours, dollars, signatures)</li>
|
||||||
|
<li><strong>Knobs</strong> — Adjustable parameters with optional cooldowns</li>
|
||||||
|
<li><strong>Projects</strong> — Circuit aggregators showing overall progress</li>
|
||||||
|
<li><strong>Amendments</strong> — Propose changes to any gate in the circuit</li>
|
||||||
|
</ul>
|
||||||
|
<a href="/${space}/rspace" style="display:inline-block;background:#1d4ed8;color:white;padding:10px 20px;border-radius:8px;text-decoration:none;font-weight:600;">
|
||||||
|
Open Canvas →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── API: list gov shapes in a space ──
|
||||||
|
|
||||||
|
routes.get("/api/shapes", (c) => {
|
||||||
|
// This is a lightweight endpoint — actual shape data lives in Automerge.
|
||||||
|
// Client-side code queries the shapes map directly.
|
||||||
|
return c.json({
|
||||||
|
info: "Gov shapes are stored in the space's Automerge document. Query the canvas shapes map for types: folk-gov-binary, folk-gov-threshold, folk-gov-knob, folk-gov-project, folk-gov-amendment.",
|
||||||
|
types: [
|
||||||
|
"folk-gov-binary",
|
||||||
|
"folk-gov-threshold",
|
||||||
|
"folk-gov-knob",
|
||||||
|
"folk-gov-project",
|
||||||
|
"folk-gov-amendment",
|
||||||
|
],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Module export ──
|
||||||
|
|
||||||
|
export const govModule: RSpaceModule = {
|
||||||
|
id: "rgov",
|
||||||
|
name: "rGov",
|
||||||
|
icon: "⚖️",
|
||||||
|
description: "Multiplayer governance decision circuits",
|
||||||
|
routes,
|
||||||
|
scoping: { defaultScope: "space", userConfigurable: false },
|
||||||
|
canvasShapes: [
|
||||||
|
"folk-gov-binary",
|
||||||
|
"folk-gov-threshold",
|
||||||
|
"folk-gov-knob",
|
||||||
|
"folk-gov-project",
|
||||||
|
"folk-gov-amendment",
|
||||||
|
],
|
||||||
|
canvasToolIds: [
|
||||||
|
"create_binary_gate",
|
||||||
|
"create_threshold",
|
||||||
|
"create_gov_knob",
|
||||||
|
"create_gov_project",
|
||||||
|
"create_amendment",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -84,6 +84,7 @@ import { bnbModule } from "../modules/rbnb/mod";
|
||||||
import { vnbModule } from "../modules/rvnb/mod";
|
import { vnbModule } from "../modules/rvnb/mod";
|
||||||
import { crowdsurfModule } from "../modules/crowdsurf/mod";
|
import { crowdsurfModule } from "../modules/crowdsurf/mod";
|
||||||
import { timeModule } from "../modules/rtime/mod";
|
import { timeModule } from "../modules/rtime/mod";
|
||||||
|
import { govModule } from "../modules/rgov/mod";
|
||||||
import { sheetModule } from "../modules/rsheet/mod";
|
import { sheetModule } from "../modules/rsheet/mod";
|
||||||
import { spaces, createSpace, resolveCallerRole, roleAtLeast } from "./spaces";
|
import { spaces, createSpace, resolveCallerRole, roleAtLeast } from "./spaces";
|
||||||
import type { SpaceRoleString } from "./spaces";
|
import type { SpaceRoleString } from "./spaces";
|
||||||
|
|
@ -141,6 +142,7 @@ registerModule(bnbModule);
|
||||||
registerModule(vnbModule);
|
registerModule(vnbModule);
|
||||||
registerModule(crowdsurfModule);
|
registerModule(crowdsurfModule);
|
||||||
registerModule(timeModule);
|
registerModule(timeModule);
|
||||||
|
registerModule(govModule); // Governance decision circuits
|
||||||
registerModule(designModule); // Scribus DTP + AI design agent
|
registerModule(designModule); // Scribus DTP + AI design agent
|
||||||
// De-emphasized modules (bottom of menu)
|
// De-emphasized modules (bottom of menu)
|
||||||
registerModule(forumModule);
|
registerModule(forumModule);
|
||||||
|
|
|
||||||
|
|
@ -2460,6 +2460,11 @@
|
||||||
FolkCommitmentPool,
|
FolkCommitmentPool,
|
||||||
FolkTaskRequest,
|
FolkTaskRequest,
|
||||||
FolkTransactionBuilder,
|
FolkTransactionBuilder,
|
||||||
|
FolkGovBinary,
|
||||||
|
FolkGovThreshold,
|
||||||
|
FolkGovKnob,
|
||||||
|
FolkGovProject,
|
||||||
|
FolkGovAmendment,
|
||||||
FolkChoiceVote,
|
FolkChoiceVote,
|
||||||
FolkChoiceRank,
|
FolkChoiceRank,
|
||||||
FolkChoiceSpider,
|
FolkChoiceSpider,
|
||||||
|
|
@ -2729,6 +2734,11 @@
|
||||||
FolkCommitmentPool.define();
|
FolkCommitmentPool.define();
|
||||||
FolkTaskRequest.define();
|
FolkTaskRequest.define();
|
||||||
FolkTransactionBuilder.define();
|
FolkTransactionBuilder.define();
|
||||||
|
FolkGovBinary.define();
|
||||||
|
FolkGovThreshold.define();
|
||||||
|
FolkGovKnob.define();
|
||||||
|
FolkGovProject.define();
|
||||||
|
FolkGovAmendment.define();
|
||||||
FolkChoiceVote.define();
|
FolkChoiceVote.define();
|
||||||
FolkChoiceRank.define();
|
FolkChoiceRank.define();
|
||||||
FolkChoiceSpider.define();
|
FolkChoiceSpider.define();
|
||||||
|
|
@ -2784,6 +2794,11 @@
|
||||||
shapeRegistry.register("folk-commitment-pool", FolkCommitmentPool);
|
shapeRegistry.register("folk-commitment-pool", FolkCommitmentPool);
|
||||||
shapeRegistry.register("folk-task-request", FolkTaskRequest);
|
shapeRegistry.register("folk-task-request", FolkTaskRequest);
|
||||||
shapeRegistry.register("folk-transaction-builder", FolkTransactionBuilder);
|
shapeRegistry.register("folk-transaction-builder", FolkTransactionBuilder);
|
||||||
|
shapeRegistry.register("folk-gov-binary", FolkGovBinary);
|
||||||
|
shapeRegistry.register("folk-gov-threshold", FolkGovThreshold);
|
||||||
|
shapeRegistry.register("folk-gov-knob", FolkGovKnob);
|
||||||
|
shapeRegistry.register("folk-gov-project", FolkGovProject);
|
||||||
|
shapeRegistry.register("folk-gov-amendment", FolkGovAmendment);
|
||||||
shapeRegistry.register("folk-choice-vote", FolkChoiceVote);
|
shapeRegistry.register("folk-choice-vote", FolkChoiceVote);
|
||||||
shapeRegistry.register("folk-choice-rank", FolkChoiceRank);
|
shapeRegistry.register("folk-choice-rank", FolkChoiceRank);
|
||||||
shapeRegistry.register("folk-choice-spider", FolkChoiceSpider);
|
shapeRegistry.register("folk-choice-spider", FolkChoiceSpider);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue