@principal-ai/file-city-react 0.5.40 → 0.5.41

package/dist/components/FileCityExplorer/AddToScopeModal.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { makeSectionLabelStyle } from './styles';
+export const AddToScopeModal = ({ path, scopes, scopeId, namespaceName, onScopeIdChange, onNamespaceNameChange, onPickExisting, onSubmit, onClose, }) => {
+    const { theme } = useTheme();
+    const sectionLabelStyle = makeSectionLabelStyle(theme);
+    React.useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [onClose]);
+    const trimmedScope = scopeId.trim();
+    const trimmedNs = namespaceName.trim();
+    const canSubmit = trimmedScope.length > 0;
+    // Determine what the submit will do, for the action label.
+    const targetScope = scopes.find(s => s.id === trimmedScope);
+    const targetNs = trimmedNs
+        ? targetScope?.namespaces.find(n => n.name === trimmedNs) ?? null
+        : null;
+    const alreadyClaimed = trimmedNs
+        ? targetNs?.paths.includes(path) ?? false
+        : targetScope?.paths.includes(path) ?? false;
+    let actionLabel = 'Add';
+    if (alreadyClaimed)
+        actionLabel = 'Already added';
+    else if (!targetScope && !trimmedNs)
+        actionLabel = 'Create scope';
+    else if (!targetScope)
+        actionLabel = 'Create scope + namespace';
+    else if (!trimmedNs)
+        actionLabel = 'Add to scope';
+    else if (!targetNs)
+        actionLabel = 'Create namespace';
+    else
+        actionLabel = 'Add path';
+    const sectionDivider = `1px solid ${theme.colors.backgroundSecondary}`;
+    const inputStyle = {
+        padding: '8px 10px',
+        background: theme.colors.backgroundDark ?? theme.colors.background,
+        color: theme.colors.text,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.radii[2],
+        fontFamily: theme.fonts.monospace,
+        fontSize: theme.fontSizes[1],
+    };
+    return (_jsx("div", { onClick: onClose, style: {
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(0, 0, 0, 0.55)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1000,
+            fontFamily: theme.fonts.body,
+        }, children: _jsxs("div", { onClick: e => e.stopPropagation(), style: {
+                width: 520,
+                maxHeight: 'min(80vh, 700px)',
+                display: 'flex',
+                flexDirection: 'column',
+                background: theme.colors.background,
+                color: theme.colors.text,
+                borderRadius: theme.radii[4],
+                border: `1px solid ${theme.colors.border}`,
+                boxShadow: theme.shadows[4],
+                overflow: 'hidden',
+            }, children: [_jsxs("div", { style: {
+                        padding: '14px 18px',
+                        borderBottom: sectionDivider,
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'flex-start',
+                        gap: theme.space[3],
+                    }, children: [_jsxs("div", { children: [_jsx("div", { style: sectionLabelStyle, children: "Add to scope" }), _jsx("div", { style: {
+                                        fontFamily: theme.fonts.monospace,
+                                        fontSize: theme.fontSizes[0],
+                                        color: theme.colors.textMuted,
+                                        marginTop: 6,
+                                        wordBreak: 'break-all',
+                                    }, children: path })] }), _jsx("button", { onClick: onClose, style: {
+                                background: 'transparent',
+                                border: 'none',
+                                color: theme.colors.textTertiary,
+                                fontSize: theme.fontSizes[3],
+                                cursor: 'pointer',
+                                lineHeight: 1,
+                                padding: 0,
+                            }, "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { style: {
+                        padding: '14px 18px',
+                        borderBottom: sectionDivider,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: theme.space[3],
+                    }, children: [_jsxs("label", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx("span", { style: sectionLabelStyle, children: "Scope" }), _jsx("input", { type: "text", value: scopeId, list: "scope-id-options", autoFocus: true, placeholder: "e.g. principal-view.cli", onChange: e => onScopeIdChange(e.target.value), onKeyDown: e => {
+                                        if (e.key === 'Enter' && canSubmit && !alreadyClaimed)
+                                            onSubmit();
+                                    }, style: inputStyle }), _jsx("datalist", { id: "scope-id-options", children: scopes.map(s => (_jsx("option", { value: s.id }, s.id))) })] }), _jsxs("label", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx("span", { style: sectionLabelStyle, children: "Namespace (optional)" }), _jsx("input", { type: "text", value: namespaceName, placeholder: "leave blank to add to scope itself", onChange: e => onNamespaceNameChange(e.target.value), onKeyDown: e => {
+                                        if (e.key === 'Enter' && canSubmit && !alreadyClaimed)
+                                            onSubmit();
+                                    }, style: inputStyle })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'flex-end', gap: theme.space[2] }, children: [_jsx("button", { onClick: onClose, style: {
+                                        padding: '8px 14px',
+                                        background: 'transparent',
+                                        color: theme.colors.textSecondary,
+                                        border: `1px solid ${theme.colors.border}`,
+                                        borderRadius: theme.radii[2],
+                                        cursor: 'pointer',
+                                        fontSize: theme.fontSizes[1],
+                                    }, children: "Cancel" }), _jsx("button", { onClick: onSubmit, disabled: !canSubmit || alreadyClaimed, style: {
+                                        padding: '8px 14px',
+                                        background: !canSubmit || alreadyClaimed
+                                            ? theme.colors.backgroundSecondary
+                                            : theme.colors.primary,
+                                        color: !canSubmit || alreadyClaimed
+                                            ? theme.colors.muted
+                                            : theme.colors.textOnPrimary,
+                                        border: `1px solid ${theme.colors.border}`,
+                                        borderRadius: theme.radii[2],
+                                        cursor: !canSubmit || alreadyClaimed ? 'not-allowed' : 'pointer',
+                                        fontSize: theme.fontSizes[1],
+                                        fontWeight: theme.fontWeights.medium,
+                                    }, children: actionLabel })] })] }), _jsxs("div", { style: {
+                        padding: '14px 18px',
+                        overflowY: 'auto',
+                        flex: 1,
+                    }, children: [_jsx("div", { style: sectionLabelStyle, children: "Existing scopes (click to prefill)" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.space[3], marginTop: theme.space[2] }, children: scopes.map(scope => (_jsxs("div", { children: [_jsx("div", { style: {
+                                            fontFamily: theme.fonts.monospace,
+                                            fontSize: theme.fontSizes[0],
+                                            color: theme.colors.textSecondary,
+                                            marginBottom: 6,
+                                        }, children: scope.id }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: theme.space[1] }, children: [_jsxs("button", { onClick: () => onPickExisting(scope.id, ''), title: scope.paths.includes(path)
+                                                    ? 'Scope already claims this path'
+                                                    : 'Prefill (scope-level)', style: {
+                                                    fontSize: theme.fontSizes[0],
+                                                    padding: '3px 7px',
+                                                    background: scope.paths.includes(path)
+                                                        ? theme.colors.background
+                                                        : theme.colors.backgroundSecondary,
+                                                    color: scope.paths.includes(path)
+                                                        ? theme.colors.muted
+                                                        : theme.colors.textSecondary,
+                                                    border: `1px dashed ${theme.colors.muted}`,
+                                                    borderRadius: theme.radii[1],
+                                                    cursor: 'pointer',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: 5,
+                                                    fontStyle: 'italic',
+                                                    opacity: scope.paths.includes(path) ? 0.6 : 1,
+                                                }, children: ["(scope-level)", scope.paths.includes(path) && (_jsx("span", { style: { marginLeft: theme.space[1], fontSize: theme.fontSizes[0] }, children: "\u2713" }))] }), scope.namespaces.map(ns => {
+                                                const claims = ns.paths.includes(path);
+                                                return (_jsxs("button", { onClick: () => onPickExisting(scope.id, ns.name), title: claims ? 'Already claims this path' : 'Prefill inputs', style: {
+                                                        fontSize: theme.fontSizes[0],
+                                                        padding: '3px 7px',
+                                                        background: claims
+                                                            ? theme.colors.background
+                                                            : theme.colors.backgroundSecondary,
+                                                        color: claims ? theme.colors.muted : theme.colors.text,
+                                                        border: `1px solid ${theme.colors.border}`,
+                                                        borderRadius: theme.radii[1],
+                                                        cursor: 'pointer',
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: 5,
+                                                        opacity: claims ? 0.6 : 1,
+                                                    }, children: [_jsx("span", { style: {
+                                                                width: 8,
+                                                                height: 8,
+                                                                borderRadius: theme.radii[1],
+                                                                background: ns.color,
+                                                                flexShrink: 0,
+                                                            } }), ns.name, claims && _jsx("span", { style: { marginLeft: theme.space[1], fontSize: theme.fontSizes[0] }, children: "\u2713" })] }, ns.name));
+                                            })] })] }, scope.id))) })] })] }) }));
+};

package/dist/components/FileCityExplorer/FileCityExplorer.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type CityData } from '../FileCity3D';
+import type { ProjectArea, Scope } from './model';
+export interface FileCityExplorerProps {
+    /** City data to render in the 3D canvas. */
+    cityData: CityData;
+    /**
+     * Prefix that scopes/namespace paths are stripped of when read out of
+     * `cityData` (e.g. `'electron-app/'`). Pass `''` if the city data is already
+     * rooted at the project root.
+     */
+    packageRoot: string;
+    /** Initial scopes (used when no persisted state is found). */
+    initialScopes?: Scope[];
+    /** Initial areas (used when no persisted state is found). */
+    initialAreas?: ProjectArea[];
+    /**
+     * When set, scopes/areas round-trip through `localStorage` under
+     * `${persistKey}.scopes` and `${persistKey}.areas`. When omitted, state is
+     * purely in-memory.
+     */
+    persistKey?: string | null;
+    /**
+     * Initial focused directory (city path). Defaults to the city root derived
+     * from `packageRoot` (with trailing slash stripped).
+     */
+    initialFocusDirectory?: string | null;
+}
+export declare const FileCityExplorer: React.FC<FileCityExplorerProps>;
+//# sourceMappingURL=FileCityExplorer.d.ts.map

package/dist/components/FileCityExplorer/FileCityExplorer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileCityExplorer.d.ts","sourceRoot":"","sources":["../../../src/components/FileCityExplorer/FileCityExplorer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAEL,KAAK,QAAQ,EAGd,MAAM,eAAe,CAAC;AAOvB,OAAO,KAAK,EAAa,WAAW,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAuB7D,MAAM,WAAW,qBAAqB;IACpC,4CAA4C;IAC5C,QAAQ,EAAE,QAAQ,CAAC;IACnB;;;;OAIG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;IACxB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAy2C5D,CAAC"}