craft-native 0.0.37

package/dist/styles/sidebar-templates.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Craft Sidebar HTML Templates
+ * Ready-to-use HTML templates for each sidebar style
+ *
+ * These can be rendered directly in Craft WebView or used as
+ * reference for building your own components.
+ *
+ * @module @craft-native/styles/sidebar-templates
+ */
+export interface SidebarItemData {
+    id: string;
+    label: string;
+    icon?: string;
+    badge?: string | number;
+    selected?: boolean;
+    children?: SidebarItemData[];
+    expanded?: boolean;
+    status?: 'running' | 'stopped' | 'none';
+    color?: string;
+}
+export interface SidebarSectionData {
+    id: string;
+    title?: string;
+    items: SidebarItemData[];
+    collapsible?: boolean;
+    collapsed?: boolean;
+}
+export interface SidebarData {
+    sections?: SidebarSectionData[];
+    items?: SidebarItemData[];
+    header?: {
+        title?: string;
+        subtitle?: string;
+        avatar?: string;
+    };
+    footer?: {
+        items?: SidebarItemData[];
+    };
+    searchPlaceholder?: string;
+    showSearch?: boolean;
+}
+declare const icons: {
+    home: string;
+    folder: string;
+    document: string;
+    star: string;
+    download: string;
+    cloud: string;
+    settings: string;
+    plus: string;
+    search: string;
+    chevronRight: string;
+    chevronDown: string;
+    x: string;
+    menu: string;
+    container: string;
+    linux: string;
+};
+export declare function renderTahoeSidebar(data: SidebarData): string;
+export declare function renderArcSidebar(data: SidebarData, collapsed?: boolean): string;
+export declare function renderOrbStackSidebar(data: SidebarData): string;
+export declare const tahoeDemoData: SidebarData;
+export declare const arcDemoData: SidebarData;
+export declare const orbstackDemoData: SidebarData;
+export declare function getFullPageHTML(sidebarHTML: string, style: 'tahoe' | 'arc' | 'orbstack'): string;
+declare const _exports: {
+    renderTahoeSidebar: typeof renderTahoeSidebar;
+    renderArcSidebar: typeof renderArcSidebar;
+    renderOrbStackSidebar: typeof renderOrbStackSidebar;
+    tahoeDemoData: typeof tahoeDemoData;
+    arcDemoData: typeof arcDemoData;
+    orbstackDemoData: typeof orbstackDemoData;
+    getFullPageHTML: typeof getFullPageHTML;
+    icons: typeof icons;
+};
+export default _exports;
+//# sourceMappingURL=sidebar-templates.d.ts.map

package/dist/styles/sidebar-templates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-templates.d.ts","sourceRoot":"","sources":["../../src/styles/sidebar-templates.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAQH,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,eAAe,EAAE,CAAA;IACxB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC/B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;IACzB,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;KAC1B,CAAA;IACD,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAMD,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;CAgBV,CAAA;AAWD,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CA+E5D;AAMD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,SAAS,UAAQ,GAAG,MAAM,CAwF7E;AAMD,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CA4E/D;AAMD,eAAO,MAAM,aAAa,EAAE,WA+C3B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,WA6BzB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,WAwB9B,CAAA;AAMD,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CA+ChG;AAMD,QAAA,MAAM,QAAQ,EAAE;IACd,kBAAkB,EAAE,OAAO,kBAAkB,CAAC;IAC9C,gBAAgB,EAAE,OAAO,gBAAgB,CAAC;IAC1C,qBAAqB,EAAE,OAAO,qBAAqB,CAAC;IACpD,aAAa,EAAE,OAAO,aAAa,CAAC;IACpC,WAAW,EAAE,OAAO,WAAW,CAAC;IAChC,gBAAgB,EAAE,OAAO,gBAAgB,CAAC;IAC1C,eAAe,EAAE,OAAO,eAAe,CAAC;IACxC,KAAK,EAAE,OAAO,KAAK,CAAC;CAUrB,CAAC;AACF,eAAe,QAAQ,CAAC"}

package/dist/styles/sidebars.d.ts

@@ -0,0 +1,194 @@
+/**
+ * Craft Sidebar Styles
+ * CSS/Tailwind-based sidebar implementations
+ *
+ * Three styles:
+ * - Tahoe: macOS Sonoma/Sequoia Finder style
+ * - Arc: Arc browser vertical tabs style
+ * - OrbStack: Dark minimal style
+ *
+ * @module @craft-native/styles/sidebars
+ */
+/**
+ * Tahoe sidebar - macOS Sonoma/Sequoia Finder style
+ *
+ * Features:
+ * - Translucent vibrancy background
+ * - Source list appearance
+ * - Rounded selection highlights
+ * - Section headers in small caps
+ * - SF Symbol-style icons
+ */
+export declare const tahoeStyles: {
+    sidebar: string;
+    content: string;
+    section: string;
+    sectionHeader: string;
+    sectionHeaderCollapsible: string;
+    collapseChevron: string;
+    item: string;
+    itemSelected: string;
+    itemIcon: string;
+    itemIconSelected: string;
+    itemLabel: string;
+    itemBadge: string;
+    itemBadgeSelected: string;
+    children: string;
+    dragIndicator: string;
+    searchContainer: string;
+    searchInput: string;
+    header: string;
+    headerAvatar: string;
+    headerTitle: string;
+    headerSubtitle: string;
+    footer: string;
+    footerButton: string;
+};
+/**
+ * Arc sidebar - Arc browser vertical tabs style
+ *
+ * Features:
+ * - Pill-shaped selection with gradient
+ * - Collapsible to icon-only mode
+ * - Colorful accent options
+ * - Pinned items section
+ * - Animated transitions
+ */
+export declare const arcStyles: {
+    sidebar: string;
+    sidebarCollapsed: string;
+    topBar: string;
+    collapseButton: string;
+    newTabButton: string;
+    content: string;
+    pinnedSection: string;
+    pinnedLabel: string;
+    sectionHeader: string;
+    space: string;
+    spaceHeader: string;
+    spaceIcon: string;
+    spaceName: string;
+    spaceCount: string;
+    item: string;
+    itemSelected: string;
+    itemCollapsed: string;
+    itemCollapsedSelected: string;
+    itemFavicon: string;
+    itemFaviconSelected: string;
+    itemLabel: string;
+    itemClose: string;
+    itemCloseSelected: string;
+    tooltip: string;
+    todaySection: string;
+    todayLabel: string;
+    bottomBar: string;
+    bottomButton: string;
+    spaceColors: {
+        red: string;
+        orange: string;
+        yellow: string;
+        green: string;
+        blue: string;
+        purple: string;
+        pink: string;
+    };
+    selectedGradients: {
+        purple: string;
+        blue: string;
+        green: string;
+        orange: string;
+        red: string;
+    };
+};
+/**
+ * OrbStack sidebar - Dark minimal style
+ *
+ * Features:
+ * - Dark theme optimized
+ * - Compact spacing
+ * - Subtle hover states
+ * - Monochrome icons
+ * - Clean, utilitarian design
+ */
+export declare const orbstackStyles: {
+    sidebar: string;
+    header: string;
+    headerTitle: string;
+    headerAction: string;
+    content: string;
+    section: string;
+    sectionHeader: string;
+    sectionHeaderClickable: string;
+    sectionCount: string;
+    divider: string;
+    item: string;
+    itemSelected: string;
+    itemWithIndicator: string;
+    runningIndicator: string;
+    stoppedIndicator: string;
+    itemIcon: string;
+    itemIconSelected: string;
+    itemLabel: string;
+    itemStatus: string;
+    itemActions: string;
+    itemActionButton: string;
+    group: string;
+    groupHeader: string;
+    groupChevron: string;
+    groupChevronExpanded: string;
+    groupContent: string;
+    footer: string;
+    footerText: string;
+    footerButton: string;
+    contextMenu: string;
+    contextMenuItem: string;
+    contextMenuItemDanger: string;
+    contextMenuDivider: string;
+    emptyState: string;
+    emptyStateIcon: string;
+    emptyStateText: string;
+    loadingSpinner: string;
+};
+/**
+ * Common utility classes for all sidebar styles
+ */
+export declare const sidebarUtils: {
+    transitionFast: string;
+    transitionNormal: string;
+    transitionSlow: string;
+    scrollbarThin: string;
+    scrollbarLight: string;
+    scrollbarDark: string;
+    focusRing: string;
+    focusRingInset: string;
+    truncate: string;
+    lineClamp2: string;
+    flexCenter: string;
+    flexBetween: string;
+    flexStart: string;
+    hideScrollbar: string;
+};
+/**
+ * CSS variables for sidebar theming
+ * Inject these into your app's root styles
+ */
+export declare const sidebarCSSVariables = "\n:root {\n  /* Tahoe style variables */\n  --sidebar-tahoe-bg: rgba(255, 255, 255, 0.7);\n  --sidebar-tahoe-bg-dark: rgba(30, 30, 30, 0.7);\n  --sidebar-tahoe-border: rgba(0, 0, 0, 0.05);\n  --sidebar-tahoe-border-dark: rgba(255, 255, 255, 0.05);\n  --sidebar-tahoe-text: #404040;\n  --sidebar-tahoe-text-dark: #e5e5e5;\n  --sidebar-tahoe-text-muted: #737373;\n  --sidebar-tahoe-text-muted-dark: #a3a3a3;\n  --sidebar-tahoe-selected: #3b82f6;\n  --sidebar-tahoe-hover: rgba(0, 0, 0, 0.05);\n  --sidebar-tahoe-hover-dark: rgba(255, 255, 255, 0.05);\n\n  /* Arc style variables */\n  --sidebar-arc-bg: #f5f5f5;\n  --sidebar-arc-bg-dark: #171717;\n  --sidebar-arc-border: #e5e5e5;\n  --sidebar-arc-border-dark: #262626;\n  --sidebar-arc-selected-from: #a855f7;\n  --sidebar-arc-selected-to: #ec4899;\n  --sidebar-arc-hover: rgba(0, 0, 0, 0.05);\n  --sidebar-arc-hover-dark: rgba(255, 255, 255, 0.05);\n\n  /* OrbStack style variables */\n  --sidebar-orb-bg: #1a1a1a;\n  --sidebar-orb-border: #2a2a2a;\n  --sidebar-orb-text: #d4d4d4;\n  --sidebar-orb-text-muted: #737373;\n  --sidebar-orb-selected: rgba(255, 255, 255, 0.1);\n  --sidebar-orb-hover: rgba(255, 255, 255, 0.05);\n  --sidebar-orb-accent: #22c55e;\n}\n";
+/**
+ * Combine multiple class strings
+ */
+export declare function cx(...classes: (string | undefined | null | false)[]): string;
+/**
+ * Get style preset by name
+ */
+export declare function getSidebarStyle(name: 'tahoe' | 'arc' | 'orbstack'): typeof tahoeStyles | typeof arcStyles | typeof orbstackStyles;
+declare const _exports: {
+    tahoe: typeof tahoeStyles;
+    arc: typeof arcStyles;
+    orbstack: typeof orbstackStyles;
+    utils: typeof sidebarUtils;
+    cssVariables: typeof sidebarCSSVariables;
+    cx: typeof cx;
+    getSidebarStyle: typeof getSidebarStyle;
+};
+export default _exports;
+//# sourceMappingURL=sidebars.d.ts.map

package/dist/styles/sidebars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebars.d.ts","sourceRoot":"","sources":["../../src/styles/sidebars.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAMH;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;CAmJvB,CAAA;AAMD;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4MrB,CAAA;AAMD;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8N1B,CAAA;AAMD;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;CA0BxB,CAAA;AAMD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,gsCAkC/B,CAAA;AAMD;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,CAE5E;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,OAAO,WAAW,GAAG,OAAO,SAAS,GAAG,OAAO,cAAc,CAWjI;AAMD,QAAA,MAAM,QAAQ,EAAE;IACd,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,GAAG,EAAE,OAAO,SAAS,CAAC;IACtB,QAAQ,EAAE,OAAO,cAAc,CAAC;IAChC,KAAK,EAAE,OAAO,YAAY,CAAC;IAC3B,YAAY,EAAE,OAAO,mBAAmB,CAAC;IACzC,EAAE,EAAE,OAAO,EAAE,CAAC;IACd,eAAe,EAAE,OAAO,eAAe,CAAC;CASzC,CAAC;AACF,eAAe,QAAQ,CAAC"}