@omniviewdev/ui 0.1.0

package/dist/sidebars/ActivityBar.d.ts

@@ -0,0 +1,16 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import { ActivityBarItem } from './types';
+export interface ActivityBarProps {
+    items: ActivityBarItem[];
+    activeId?: string;
+    onChange?: (id: string) => void;
+    position?: 'left' | 'right';
+    bottomItems?: ActivityBarItem[];
+    width?: number;
+    sx?: SxProps<Theme>;
+}
+declare function ActivityBar({ items, activeId, onChange, position, bottomItems, width, sx, }: ActivityBarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ActivityBar {
+    var displayName: string;
+}
+export default ActivityBar;

package/dist/sidebars/NavMenu.d.ts

@@ -0,0 +1,27 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import { ComponentSize } from '../types';
+import { NavSection } from './types';
+export interface NavMenuProps {
+    sections: NavSection[];
+    selected?: string;
+    onSelect?: (id: string) => void;
+    size?: ComponentSize;
+    /** Make the menu scrollable within its container. */
+    scrollable?: boolean;
+    /** Start all collapsible items expanded. Defaults to false. */
+    defaultExpanded?: boolean;
+    /** Animate expand/collapse transitions. Defaults to true. */
+    animate?: boolean;
+    /** Initial expanded state to merge over computed defaults (e.g. from persistence). */
+    initialExpandedState?: Record<string, boolean>;
+    /** Called whenever expanded state changes (for external persistence). */
+    onExpandedChange?: (state: Record<string, boolean>) => void;
+    sx?: SxProps<Theme>;
+}
+/** Walk the section tree and return IDs of all ancestor items containing the target. */
+export declare function findAncestors(sections: NavSection[], targetId: string): string[];
+declare function NavMenu({ sections, selected, onSelect, size, scrollable, defaultExpanded, animate, initialExpandedState, onExpandedChange, sx, }: NavMenuProps): import("react/jsx-runtime").JSX.Element;
+declare namespace NavMenu {
+    var displayName: string;
+}
+export default NavMenu;

package/dist/sidebars/NavMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/sidebars/PropertyGrid.d.ts

@@ -0,0 +1,16 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import { ComponentSize } from '../types';
+import { PropertyGridItem } from './types';
+export interface PropertyGridProps {
+    items: PropertyGridItem[];
+    columns?: 1 | 2;
+    size?: ComponentSize;
+    editable?: boolean;
+    onEdit?: (key: string, value: string) => void;
+    sx?: SxProps<Theme>;
+}
+declare function PropertyGrid({ items, columns, size, editable, onEdit, sx, }: PropertyGridProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PropertyGrid {
+    var displayName: string;
+}
+export default PropertyGrid;

package/dist/sidebars/SidebarGroup.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface SidebarGroupProps {
+    title: string;
+    count?: number;
+    defaultExpanded?: boolean;
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+    sx?: SxProps<Theme>;
+}
+declare function SidebarGroup({ title, count, defaultExpanded, children, actions, sx, }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarGroup {
+    var displayName: string;
+}
+export default SidebarGroup;

package/dist/sidebars/SidebarPanel.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface SidebarPanelProps {
+    title: string;
+    icon?: React.ReactNode;
+    toolbar?: React.ReactNode;
+    children: React.ReactNode;
+    searchable?: boolean;
+    onSearch?: (query: string) => void;
+    collapsible?: boolean;
+    badge?: React.ReactNode;
+    width?: number | string;
+    sx?: SxProps<Theme>;
+}
+declare function SidebarPanel({ title, icon, toolbar, children, searchable, onSearch, badge, width, sx, }: SidebarPanelProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarPanel {
+    var displayName: string;
+}
+export default SidebarPanel;

package/dist/sidebars/SidebarTreeItem.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface SidebarTreeItemProps {
+    label: string;
+    icon?: React.ReactNode;
+    badge?: React.ReactNode;
+    actions?: React.ReactNode;
+    depth?: number;
+    selected?: boolean;
+    expanded?: boolean;
+    hasChildren?: boolean;
+    onClick?: () => void;
+    onToggle?: () => void;
+    onContextMenu?: (e: React.MouseEvent) => void;
+    sx?: SxProps<Theme>;
+}
+declare function SidebarTreeItem({ label, icon, badge, actions, depth, selected, expanded, hasChildren, onClick, onToggle, onContextMenu, sx, }: SidebarTreeItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarTreeItem {
+    var displayName: string;
+}
+export default SidebarTreeItem;

package/dist/sidebars/index.d.ts

@@ -0,0 +1,13 @@
+export { default as ActivityBar } from './ActivityBar';
+export type { ActivityBarProps } from './ActivityBar';
+export { default as SidebarPanel } from './SidebarPanel';
+export type { SidebarPanelProps } from './SidebarPanel';
+export { default as SidebarGroup } from './SidebarGroup';
+export type { SidebarGroupProps } from './SidebarGroup';
+export { default as SidebarTreeItem } from './SidebarTreeItem';
+export type { SidebarTreeItemProps } from './SidebarTreeItem';
+export { default as PropertyGrid } from './PropertyGrid';
+export type { PropertyGridProps } from './PropertyGrid';
+export { default as NavMenu } from './NavMenu';
+export type { NavMenuProps } from './NavMenu';
+export type { ActivityBarItem, PropertyGridItem, NavSection, NavMenuItem, } from './types';

package/dist/sidebars/types.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export interface ActivityBarItem {
+    id: string;
+    icon: React.ReactNode;
+    label: string;
+    badge?: number | boolean;
+}
+export interface PropertyGridItem {
+    key: string;
+    label: string;
+    value: React.ReactNode;
+    type?: 'text' | 'boolean' | 'color' | 'link' | 'code';
+    copyable?: boolean;
+    editable?: boolean;
+}
+export interface NavSection {
+    title: string;
+    items: NavMenuItem[];
+}
+export interface NavMenuItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    badge?: React.ReactNode;
+    children?: NavMenuItem[];
+    disabled?: boolean;
+    /** Start expanded when first rendered. Only relevant for items with children. */
+    defaultExpanded?: boolean;
+}

package/dist/sidebars.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("@mui/material/Box"),G=require("@mui/material/Tooltip"),b=require("react"),j=require("@mui/material/Typography"),N=require("@mui/material/InputBase"),m=require("react-icons/lu"),A=require("@mui/material/Collapse"),V=require("@mui/material/Chip"),F=require("@mui/material/Checkbox");function $({count:e}){return e?e===!0?r.jsx(i,{sx:{position:"absolute",top:6,right:6,width:8,height:8,borderRadius:"50%",bgcolor:"var(--ov-accent-fg)",border:"2px solid var(--ov-bg-surface)"}}):r.jsx(i,{sx:{position:"absolute",top:4,right:4,minWidth:16,height:16,borderRadius:8,bgcolor:"var(--ov-accent-fg)",color:"#fff",fontSize:10,fontWeight:600,display:"flex",alignItems:"center",justifyContent:"center",px:.5,border:"2px solid var(--ov-bg-surface)"},children:e>99?"99+":e}):null}function R({item:e,active:o,onClick:a,position:n}){return r.jsx(G,{title:e.label,placement:n==="left"?"right":"left",children:r.jsxs(i,{onClick:a,sx:{position:"relative",width:"100%",aspectRatio:"1",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",color:o?"var(--ov-fg-base)":"var(--ov-fg-muted)",opacity:o?1:.7,"&:hover":{opacity:1,color:"var(--ov-fg-base)"},"&::before":o?{content:'""',position:"absolute",[n==="left"?"left":"right"]:0,top:"25%",height:"50%",width:2,borderRadius:1,bgcolor:"var(--ov-accent-fg)"}:{},transition:"color 100ms ease, opacity 100ms ease",fontSize:22},children:[e.icon,r.jsx($,{count:e.badge})]})})}function D({items:e,activeId:o,onChange:a,position:n="left",bottomItems:t,width:l=48,sx:c}){return r.jsxs(i,{sx:{width:l,minWidth:l,height:"100%",bgcolor:"var(--ov-bg-surface)",borderRight:n==="left"?"1px solid var(--ov-border-default)":void 0,borderLeft:n==="right"?"1px solid var(--ov-border-default)":void 0,display:"flex",flexDirection:"column",alignItems:"center",py:.5,...typeof c=="object"&&!Array.isArray(c)?c:{}},children:[r.jsx(i,{sx:{display:"flex",flexDirection:"column",alignItems:"center",width:"100%",flex:1},children:e.map(s=>r.jsx(R,{item:s,active:o===s.id,onClick:()=>a?.(s.id),position:n},s.id))}),t&&t.length>0&&r.jsx(i,{sx:{display:"flex",flexDirection:"column",alignItems:"center",width:"100%"},children:t.map(s=>r.jsx(R,{item:s,active:o===s.id,onClick:()=>a?.(s.id),position:n},s.id))})]})}D.displayName="ActivityBar";function M({title:e,icon:o,toolbar:a,children:n,searchable:t=!1,onSearch:l,badge:c,width:s=260,sx:f}){const[d,u]=b.useState(""),x=p=>{u(p),l?.(p)};return r.jsxs(i,{sx:{width:s,minWidth:s,height:"100%",display:"flex",flexDirection:"column",bgcolor:"var(--ov-bg-surface)",borderRight:"1px solid var(--ov-border-default)",overflow:"hidden",...typeof f=="object"&&!Array.isArray(f)?f:{}},children:[r.jsxs(i,{sx:{display:"flex",alignItems:"center",gap:.75,px:1.5,py:1,minHeight:36,borderBottom:"1px solid var(--ov-border-muted)"},children:[o&&r.jsx(i,{sx:{display:"flex",alignItems:"center",color:"var(--ov-fg-muted)",fontSize:14},children:o}),r.jsx(j,{variant:"subtitle2",sx:{flex:1,fontSize:11,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.05em",color:"var(--ov-fg-muted)"},noWrap:!0,children:e}),c,a]}),t&&r.jsx(i,{sx:{px:1,py:.75,borderBottom:"1px solid var(--ov-border-muted)"},children:r.jsxs(i,{sx:{display:"flex",alignItems:"center",gap:.5,px:1,py:.25,borderRadius:1,bgcolor:"var(--ov-bg-base)",border:"1px solid var(--ov-border-default)"},children:[r.jsx(m.LuSearch,{size:13,color:"var(--ov-fg-faint)"}),r.jsx(N,{value:d,onChange:p=>x(p.target.value),placeholder:"Search...",sx:{flex:1,fontSize:12,"& input":{padding:0},"& input::placeholder":{color:"var(--ov-fg-faint)",opacity:1}}})]})}),r.jsx(i,{sx:{flex:1,overflow:"auto",py:.5},children:n})]})}M.displayName="SidebarPanel";function T({title:e,count:o,defaultExpanded:a=!0,children:n,actions:t,sx:l}){const[c,s]=b.useState(a);return r.jsxs(i,{sx:l,children:[r.jsxs(i,{onClick:()=>s(!c),sx:{display:"flex",alignItems:"center",gap:.25,px:1,py:.5,cursor:"pointer",userSelect:"none","&:hover":{bgcolor:"var(--ov-state-hover)"},"&:hover .sidebar-group-actions":{opacity:1}},children:[r.jsx(i,{sx:{display:"flex",alignItems:"center",flexShrink:0,color:"var(--ov-fg-faint)"},children:c?r.jsx(m.LuChevronDown,{size:12}):r.jsx(m.LuChevronRight,{size:12})}),r.jsx(j,{variant:"caption",sx:{flex:1,fontSize:11,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.06em",color:"var(--ov-fg-muted)",lineHeight:1.4},noWrap:!0,children:e}),o!=null&&r.jsx(V,{label:o,size:"small",sx:{height:16,fontSize:10,fontWeight:600,bgcolor:"var(--ov-state-hover)",color:"var(--ov-fg-muted)","& .MuiChip-label":{px:.75}}}),t&&r.jsx(i,{className:"sidebar-group-actions",onClick:f=>f.stopPropagation(),sx:{display:"flex",alignItems:"center",gap:.25,opacity:0,transition:"opacity 100ms ease"},children:t})]}),r.jsx(A,{in:c,unmountOnExit:!0,children:n})]})}T.displayName="SidebarGroup";function B({label:e,icon:o,badge:a,actions:n,depth:t=0,selected:l=!1,expanded:c=!1,hasChildren:s=!1,onClick:f,onToggle:d,onContextMenu:u,sx:x}){return r.jsxs(i,{onClick:f,onContextMenu:u,sx:{display:"flex",alignItems:"center",gap:.5,py:.25,pr:1,pl:t*1.5+1,cursor:"pointer",minHeight:24,borderRadius:"4px",mx:.5,bgcolor:l?"var(--ov-accent-subtle)":"transparent",color:l?"var(--ov-accent-fg)":"var(--ov-fg-default)","&:hover":{bgcolor:l?"var(--ov-accent-subtle)":"var(--ov-state-hover)"},"&:hover .tree-item-actions":{opacity:1},...typeof x=="object"&&!Array.isArray(x)?x:{}},children:[s?r.jsx(i,{onClick:p=>{p.stopPropagation(),d?.()},sx:{display:"flex",alignItems:"center",flexShrink:0,color:"var(--ov-fg-faint)","&:hover":{color:"var(--ov-fg-default)"}},children:c?r.jsx(m.LuChevronDown,{size:14}):r.jsx(m.LuChevronRight,{size:14})}):r.jsx(i,{sx:{width:14,flexShrink:0}}),o&&r.jsx(i,{sx:{display:"flex",alignItems:"center",flexShrink:0,fontSize:14},children:o}),r.jsx(j,{variant:"body2",sx:{flex:1,fontSize:12,color:"inherit",lineHeight:1.4},noWrap:!0,children:e}),a,n&&r.jsx(i,{className:"tree-item-actions",onClick:p=>p.stopPropagation(),sx:{display:"flex",alignItems:"center",gap:.25,opacity:0,transition:"opacity 100ms ease"},children:n})]})}B.displayName="SidebarTreeItem";const _={xs:"11px",sm:"12px",md:"12px",lg:"13px",xl:"14px"},K={xs:22,sm:24,md:26,lg:30,xl:34};function w({item:e,size:o,editable:a,onEdit:n,striped:t}){const[l,c]=b.useState(!1),[s,f]=b.useState(""),d=_[o],u=K[o],x=a||e.editable,p=()=>{if(!x)return;const y=typeof e.value=="string"?e.value:String(e.value??"");f(y),c(!0)},C=()=>{c(!1),n?.(e.key,s)},I=()=>l?r.jsx(N,{value:s,onChange:y=>f(y.target.value),onBlur:C,onKeyDown:y=>{y.key==="Enter"&&C(),y.key==="Escape"&&c(!1)},autoFocus:!0,sx:{fontSize:d,flex:1,"& input":{py:0,px:.5}}}):e.type==="boolean"?r.jsx(F,{checked:e.value===!0||e.value==="true",size:"small",disabled:!x,sx:{p:0}}):e.type==="color"&&typeof e.value=="string"?r.jsxs(i,{sx:{display:"flex",alignItems:"center",gap:.5},children:[r.jsx(i,{sx:{width:12,height:12,borderRadius:.5,bgcolor:e.value,border:"1px solid var(--ov-border-default)",flexShrink:0}}),r.jsx(j,{variant:"body2",sx:{fontSize:d,color:"inherit",fontFamily:"var(--ov-font-mono)"},noWrap:!0,children:e.value})]}):e.type==="code"?r.jsx(j,{variant:"body2",sx:{fontSize:d,color:"inherit",fontFamily:"var(--ov-font-mono)"},noWrap:!0,children:e.value}):e.type==="link"?r.jsx(j,{variant:"body2",sx:{fontSize:d,color:"var(--ov-accent-fg)",cursor:"pointer","&:hover":{textDecoration:"underline"}},noWrap:!0,children:e.value}):r.jsx(j,{variant:"body2",sx:{fontSize:d,color:"inherit"},noWrap:!0,children:e.value});return r.jsxs(i,{onDoubleClick:p,sx:{display:"flex",alignItems:"center",minHeight:u,px:1,gap:1,bgcolor:t?"var(--ov-state-hover)":"transparent","&:hover":{bgcolor:"var(--ov-state-hover)"}},children:[r.jsx(j,{variant:"body2",sx:{width:"40%",minWidth:"40%",fontSize:d,color:"var(--ov-fg-muted)",fontWeight:500},noWrap:!0,children:e.label}),r.jsx(i,{sx:{flex:1,display:"flex",alignItems:"center",overflow:"hidden",color:"var(--ov-fg-default)"},children:I()})]})}function H({items:e,columns:o=1,size:a="md",editable:n=!1,onEdit:t,sx:l}){if(o===2){const c=Math.ceil(e.length/2),s=e.slice(0,c),f=e.slice(c);return r.jsxs(i,{sx:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:0,...typeof l=="object"&&!Array.isArray(l)?l:{}},children:[r.jsx(i,{children:s.map((d,u)=>r.jsx(w,{item:d,size:a,editable:n,onEdit:t,striped:u%2===1},d.key))}),r.jsx(i,{children:f.map((d,u)=>r.jsx(w,{item:d,size:a,editable:n,onEdit:t,striped:u%2===1},d.key))})]})}return r.jsx(i,{sx:l,children:e.map((c,s)=>r.jsx(w,{item:c,size:a,editable:n,onEdit:t,striped:s%2===1},c.key))})}H.displayName="PropertyGrid";const Z={xs:11,sm:12,md:13,lg:14,xl:15},E=12,z=14,J=10;function Q(e){const o={};function a(n){for(const t of n)t.children&&t.children.length>0&&(o[t.id]=!0),t.children&&a(t.children)}for(const n of e)a(n.items);return o}function U(e){const o={};function a(n){for(const t of n)t.defaultExpanded&&(o[t.id]=!0),t.children&&a(t.children)}for(const n of e)a(n.items);return o}function X(e,o){const a=[];function n(t){for(const l of t){if(l.id===o)return!0;if(l.children&&l.children.length>0){if(a.push(l.id),n(l.children))return!0;a.pop()}}return!1}for(const t of e){if(n(t.items))return[...a];a.length=0}return[]}function P({item:e,depth:o,selected:a,onSelect:n,fontSize:t,expandedState:l,onToggleExpanded:c,animate:s}){const f=l[e.id]??!1,d=a===e.id,u=e.children&&e.children.length>0,x=u&&e.children&&r.jsx(r.Fragment,{children:e.children.map(p=>r.jsx(P,{item:p,depth:o+1,selected:a,onSelect:n,fontSize:t,expandedState:l,onToggleExpanded:c,animate:s},p.id))});return r.jsxs(i,{children:[r.jsxs(i,{onClick:()=>{e.disabled||(u?c(e.id):n?.(e.id))},sx:{display:"flex",alignItems:"center",gap:"4px",pl:`${o*J+4}px`,pr:"6px",py:"3px",cursor:e.disabled?"default":"pointer",opacity:e.disabled?.5:1,borderRadius:"4px",mx:"4px",my:"1px",bgcolor:d?"var(--ov-accent-subtle)":"transparent",color:d?"var(--ov-accent-fg)":"var(--ov-fg-default)",fontWeight:d?600:u?500:400,"&:hover":{bgcolor:d?"var(--ov-accent-subtle)":"var(--ov-state-hover)"}},children:[r.jsx(i,{sx:{display:"flex",alignItems:"center",justifyContent:"center",width:z,minWidth:z,flexShrink:0,color:"var(--ov-fg-faint)"},children:u&&(f?r.jsx(m.LuChevronDown,{size:E}):r.jsx(m.LuChevronRight,{size:E}))}),e.icon&&r.jsx(i,{sx:{display:"flex",alignItems:"center",flexShrink:0,fontSize:t+2},children:e.icon}),r.jsx(j,{variant:"body2",sx:{flex:1,fontSize:t,color:"inherit",fontWeight:"inherit"},noWrap:!0,children:e.label}),e.badge]}),u&&(s?r.jsx(A,{in:f,unmountOnExit:!0,children:x}):f?x:null)]})}const Y={overflow:"auto",maxHeight:"100%",flex:1,minHeight:0,scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"}};function q({sections:e,selected:o,onSelect:a,size:n="md",scrollable:t,defaultExpanded:l=!1,animate:c=!0,initialExpandedState:s,onExpandedChange:f,sx:d}){const u=Z[n],x=b.useMemo(()=>l?Q(e):U(e),[e,l]),[p,C]=b.useState(()=>({...x,...s??{}})),I=b.useRef(f);I.current=f;const y=b.useCallback(h=>{C(v=>{const g=h(v);return g!==v&&I.current?.(g),g})},[]),W=b.useRef(e);b.useEffect(()=>{W.current!==e&&(W.current=e,y(h=>{const v=x,g={...h};let k=!1;for(const S of Object.keys(v))S in g||(g[S]=v[S],k=!0);return k?g:h}))},[e,x,y]),b.useEffect(()=>{if(!o)return;const h=X(e,o);h.length>0&&y(v=>{const g={...v};let k=!1;for(const S of h)g[S]||(g[S]=!0,k=!0);return k?g:v})},[o,e,y]);const L=b.useCallback(h=>{y(v=>({...v,[h]:!v[h]}))},[y]),O=t?{...Y,...d}:d;return r.jsx(i,{sx:O,children:e.map((h,v)=>r.jsxs(i,{sx:{mb:.5,mt:v===0?0:.25},children:[h.title&&r.jsx(j,{variant:"overline",sx:{display:"block",px:"12px",py:"4px",fontSize:10,fontWeight:600,letterSpacing:"0.08em",color:"var(--ov-fg-faint)",textTransform:"uppercase"},children:h.title}),h.items.map(g=>r.jsx(P,{item:g,depth:0,selected:o,onSelect:a,fontSize:u,expandedState:p,onToggleExpanded:L,animate:c},g.id))]},h.title||`section-${v}`))})}q.displayName="NavMenu";exports.ActivityBar=D;exports.NavMenu=q;exports.PropertyGrid=H;exports.SidebarGroup=T;exports.SidebarPanel=M;exports.SidebarTreeItem=B;