@placeholderco/placeholder-ui 1.0.12 → 2.1.0

package/dist/index.d.ts

@@ -1,82 +1,146 @@
-export { default as Button } from './ui/Button.svelte';
-export { default as ActionIcon } from './ui/ActionIcon.svelte';
-export { default as Badge } from './ui/Badge.svelte';
-export { default as Dialog } from './ui/Dialog.svelte';
-export { default as Drawer } from './ui/Drawer.svelte';
-export { default as Dropdown } from './ui/Dropdown.svelte';
-export { default as Dropzone } from './ui/Dropzone.svelte';
-export { default as Link } from './ui/Link.svelte';
-export { default as Loader } from './ui/Loader.svelte';
-export { default as Pagination } from './ui/Pagination.svelte';
-export { default as Popover } from './ui/Popover.svelte';
-export { default as Tabs } from './ui/Tabs.svelte';
-export { default as Table } from './ui/Table.svelte';
-export type { Column } from './ui/Table.svelte';
-export { default as ThemeSwitcher } from './ui/ThemeSwitcher.svelte';
-export { default as Toaster } from './ui/Toaster.svelte';
-export { default as Tooltip } from './ui/Tooltip.svelte';
-export { default as ProgressBar } from './ui/ProgressBar.svelte';
-export type { ProgressBarSegment } from './ui/ProgressBar.svelte';
-export type { ProgressBarVariant } from './ui/ProgressBarVariant.js';
-export { default as Progress } from './ui/Progress.svelte';
-export { default as Skeleton } from './ui/Skeleton.svelte';
-export { default as LoadingOverlay } from './ui/LoadingOverlay.svelte';
-export { default as Accordion } from './ui/Accordion.svelte';
-export type { AccordionItem } from './ui/Accordion.svelte';
-export { default as RingProgress } from './ui/RingProgress.svelte';
-export { default as Breadcrumbs } from './ui/Breadcrumbs.svelte';
-export { default as Stepper } from './ui/Stepper.svelte';
-export { default as Timeline } from './ui/Timeline.svelte';
-export { default as Alert } from './display/Alert.svelte';
-export { default as LinkCollection } from './display/LinkCollection.svelte';
-export { default as Paper } from './display/Paper.svelte';
-export { default as Avatar } from './display/Avatar.svelte';
-export { default as AppShell } from './layout/AppShell.svelte';
-export { default as Navbar } from './layout/Navbar.svelte';
-export { default as CustomNavbar } from './layout/CustomNavbar.svelte';
-export { default as Sidenav } from './layout/Sidenav.svelte';
-export type { SidenavItem, SidenavSection } from './layout/Sidenav.svelte';
-export { default as Autocomplete } from './form/Autocomplete.svelte';
-export { default as AutocompleteMulti } from './form/AutocompleteMulti.svelte';
-export { default as Checkbox } from './form/Checkbox.svelte';
-export { default as ComboBoxItemBuilder } from './form/ComboBoxItemBuilder.svelte';
-export { default as CronBuilder } from './form/CronBuilder.svelte';
-export { default as DatePicker } from './form/DatePicker.svelte';
-export type { DatePickerProps } from './form/DatePicker.svelte';
-export { default as DateRangePicker } from './form/DateRangePicker.svelte';
-export type { DateRangePickerProps } from './form/DateRangePicker.svelte';
-export { default as TimePicker } from './form/TimePicker.svelte';
-export { default as DateTimePicker } from './form/DateTimePicker.svelte';
-export { default as FormGroup } from './form/FormGroup.svelte';
-export { default as Number } from './form/Number.svelte';
-export { default as Radio } from './form/Radio.svelte';
-export type { RadioProps } from './form/Radio.svelte';
-export { default as RadioGroup } from './form/RadioGroup.svelte';
-export { default as Select } from './form/Select.svelte';
-export { default as SelectMulti } from './form/SelectMulti.svelte';
-export { default as SegmentedControl } from './form/SegmentedControl.svelte';
-export { default as TextArea } from './form/TextArea.svelte';
-export { default as Textbox } from './form/Textbox.svelte';
-export { default as Switch } from './form/Switch.svelte';
-export { default as Chips } from './form/Chips.svelte';
-export { default as PasswordInput } from './form/PasswordInput.svelte';
-export { default as Slider } from './form/Slider.svelte';
-export { default as Rating } from './form/Rating.svelte';
-export { default as FileInput } from './form/FileInput.svelte';
-export * from './icon/index.js';
-export type { ButtonVariant } from './ui/ButtonVariant.js';
-export type { ButtonSize } from './ui/ButtonSize.js';
-export type { SegmentedControlSize } from './form/SegmentedControl.svelte';
-export type { Hyperlink } from './models/Hyperlink.js';
-export type { LinkCollectionItem } from './models/LinkCollectionItem.js';
-export * from './models/ComboBoxItem.js';
-export * from './models/NavbarItem.js';
-export * from './models/NotifyModel.js';
-export * from './actions/ClickOutside.js';
-export * from './util/CronParser.js';
-export * from './util/DateFunctions.js';
-export * from './util/interceptLinkClick.js';
-export * from './transitions/Transitions.js';
-export * from './util/NavigateTo.js';
-export * from './theme.svelte.js';
-export * from './ui/Toast.svelte.js';
+export { default as Accordion } from "./ui/Accordion.svelte";
+export type { AccordionProps, AccordionContext, AccordionTitleContext, AccordionSize, } from "./ui/Accordion.svelte";
+export { default as AccordionItem } from "./ui/AccordionItem.svelte";
+export type { AccordionItemProps } from "./ui/AccordionItem.svelte";
+export { default as Button } from "./ui/Button.svelte";
+export type { ButtonProps } from "./ui/Button.svelte";
+export { default as ActionIcon } from "./ui/ActionIcon.svelte";
+export type { ActionIconProps } from "./ui/ActionIcon.svelte";
+export { default as Badge } from "./ui/Badge.svelte";
+export type { BadgeProps } from "./ui/Badge.svelte";
+export { default as Dialog } from "./ui/Dialog.svelte";
+export type { DialogProps, DialogContext } from "./ui/Dialog.svelte";
+export { default as Drawer } from "./ui/Drawer.svelte";
+export type { DrawerProps } from "./ui/Drawer.svelte";
+export { default as Dropdown } from "./ui/Dropdown.svelte";
+export type { DropdownProps } from "./ui/Dropdown.svelte";
+export { default as Dropzone } from "./ui/Dropzone.svelte";
+export type { DropzoneProps } from "./ui/Dropzone.svelte";
+export { default as Link } from "./ui/Link.svelte";
+export type { LinkProps } from "./ui/Link.svelte";
+export { default as Loader } from "./ui/Loader.svelte";
+export type { LoaderProps } from "./ui/Loader.svelte";
+export { default as Logo } from "./ui/Logo.svelte";
+export type { LogoProps } from "./ui/Logo.svelte";
+export { default as Pagination } from "./ui/Pagination.svelte";
+export type { PaginationProps } from "./ui/Pagination.svelte";
+export { default as Popover } from "./ui/Popover.svelte";
+export type { PopoverProps } from "./ui/Popover.svelte";
+export { default as ContextMenu } from "./ui/ContextMenu.svelte";
+export type { ContextMenuProps, ContextMenuItem, } from "./ui/ContextMenu.svelte";
+export { default as ProgressBar } from "./ui/ProgressBar.svelte";
+export type { ProgressBarProps, ProgressBarSegment, } from "./ui/ProgressBar.svelte";
+export type { ProgressBarVariant, LegacyProgressBarVariant, } from "./ui/ProgressBarVariant.js";
+export { default as Tabs } from "./ui/Tabs.svelte";
+export type { TabsProps } from "./ui/Tabs.svelte";
+export { default as Table } from "./ui/Table.svelte";
+export type { Column, TableProps } from "./ui/Table.svelte";
+export { default as ThemeSwitcher } from "./ui/ThemeSwitcher.svelte";
+export type { ThemeSwitcherProps } from "./ui/ThemeSwitcher.svelte";
+export { default as Sortable } from "./ui/Sortable.svelte";
+export type { SortableProps } from "./ui/Sortable.svelte";
+export { default as MultiSortable } from "./ui/MultiSortable.svelte";
+export type { MultiSortableProps } from "./ui/MultiSortable.svelte";
+export { default as Toaster } from "./ui/Toaster.svelte";
+export { default as Tooltip } from "./ui/Tooltip.svelte";
+export type { TooltipProps, TooltipLocation } from "./ui/Tooltip.svelte";
+export { default as Alert } from "./display/alert/Alert.svelte";
+export type { AlertProps } from "./display/alert/Alert.svelte";
+export { default as LinkCollection } from "./display/LinkCollection.svelte";
+export type { LinkCollectionProps } from "./display/LinkCollection.svelte";
+export { default as Navbar } from "./layout/Navbar.svelte";
+export type { NavbarProps, NavbarVariant } from "./layout/Navbar.svelte";
+export { default as NavbarItemView } from "./layout/NavbarItemView.svelte";
+export type { NavbarItemViewProps } from "./layout/NavbarItemView.svelte";
+export { default as CustomNavbar } from "./layout/CustomNavbar.svelte";
+export type { CustomNavbarProps } from "./layout/CustomNavbar.svelte";
+export { default as AppShell } from "./layout/AppShell.svelte";
+export type { AppShellProps } from "./layout/AppShell.svelte";
+export { default as Sidenav } from "./layout/Sidenav.svelte";
+export type { SidenavItem, SidenavItemAction, SidenavSection, SidenavProps, } from "./layout/Sidenav.svelte";
+export { default as Paper } from "./display/Paper.svelte";
+export type { PaperProps } from "./display/Paper.svelte";
+export { default as Avatar } from "./display/Avatar.svelte";
+export type { AvatarProps } from "./display/Avatar.svelte";
+export { default as Autocomplete } from "./form/Autocomplete.svelte";
+export type { AutocompleteProps } from "./form/Autocomplete.svelte";
+export { default as AutocompleteMulti } from "./form/AutocompleteMulti.svelte";
+export type { AutocompleteMultiProps } from "./form/AutocompleteMulti.svelte";
+export { default as Checkbox } from "./form/Checkbox.svelte";
+export type { CheckboxProps } from "./form/Checkbox.svelte";
+export { default as ComboBoxItemBuilder } from "./form/ComboBoxItemBuilder.svelte";
+export type { ComboBoxItemBuilderProps } from "./form/ComboBoxItemBuilder.svelte";
+export { default as StringArrayBuilder } from "./form/StringArrayBuilder.svelte";
+export type { StringArrayBuilderProps } from "./form/StringArrayBuilder.svelte";
+export { default as CronBuilder } from "./form/CronBuilder.svelte";
+export type { CronBuilderProps } from "./form/CronBuilder.svelte";
+export { default as DatePicker } from "./form/DatePicker.svelte";
+export type { DatePickerProps } from "./form/DatePicker.svelte";
+export { default as DateRangePicker } from "./form/DateRangePicker.svelte";
+export type { DateRangePickerProps } from "./form/DateRangePicker.svelte";
+export { default as TimePicker } from "./form/TimePicker.svelte";
+export type { TimePickerProps } from "./form/TimePicker.svelte";
+export { default as DateTimePicker } from "./form/DateTimePicker.svelte";
+export type { DateTimePickerProps } from "./form/DateTimePicker.svelte";
+export { default as FormGroup } from "./form/FormGroup.svelte";
+export type { FormGroupProps } from "./form/FormGroup.svelte";
+export { default as Number } from "./form/Number.svelte";
+export type { NumberProps } from "./form/Number.svelte";
+export { default as Radio } from "./form/Radio.svelte";
+export type { RadioProps } from "./form/Radio.svelte";
+export { default as RadioGroup } from "./form/RadioGroup.svelte";
+export type { RadioGroupProps } from "./form/RadioGroup.svelte";
+export { default as Select } from "./form/Select.svelte";
+export type { SelectProps } from "./form/Select.svelte";
+export { default as SelectMulti } from "./form/SelectMulti.svelte";
+export type { SelectMultiProps } from "./form/SelectMulti.svelte";
+export { default as SegmentedControl } from "./form/SegmentedControl.svelte";
+export type { SegmentedControlProps, SegmentedControlSize, } from "./form/SegmentedControl.svelte";
+export { default as TextArea } from "./form/TextArea.svelte";
+export type { TextAreaProps } from "./form/TextArea.svelte";
+export { default as Textbox } from "./form/Textbox.svelte";
+export type { TextboxProps } from "./form/Textbox.svelte";
+export { default as Slider } from "./form/Slider.svelte";
+export type { SliderProps } from "./form/Slider.svelte";
+export { default as Switch } from "./form/Switch.svelte";
+export type { SwitchProps } from "./form/Switch.svelte";
+export { default as Chips } from "./form/Chips.svelte";
+export type { ChipsProps } from "./form/Chips.svelte";
+export { default as ColorPicker } from "./form/ColorPicker.svelte";
+export type { ColorPickerProps, ColorFormat } from "./form/ColorPicker.svelte";
+export { parseColor, parseHex, toHex, formatColor, rgbToHsv, hsvToRgb, rgbToHsl, } from "./form/ColorPicker.svelte";
+export { default as TipTap } from "./editors/tiptap/TipTap.svelte";
+export type { TipTapProps, DocumentUploadResult, } from "./editors/tiptap/TipTap.svelte";
+export { default as TipTapBubble } from "./editors/tiptap/TipTapBubble.svelte";
+export type { TipTapBubbleProps } from "./editors/tiptap/TipTapBubble.svelte";
+export type { CollaborationConfig, CollaborationUser, } from "./editors/tiptap/collaboration.js";
+export { CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage, } from "./editors/tiptap/extensions/index.js";
+export type { CodeBlocksOptions, CodeBlockEditorOptions, CodeBlockLanguageDef, CodeBlockLanguageId, } from "./editors/tiptap/extensions/index.js";
+export type { AnyExtension } from "@tiptap/core";
+export { default as CodeMirror } from "./editors/CodeMirror.svelte";
+export type { CodeMirrorProps } from "./editors/CodeMirror.svelte";
+export { default as GitCard } from "./cards/GitCard.svelte";
+export type { GitCardProps } from "./cards/GitCard.svelte";
+export * from "./icon/index.js";
+export type { IconProps } from "./icon/Icon.svelte";
+export type { ButtonVariant, LegacyButtonVariant } from "./ui/ButtonVariant.js";
+export type { ButtonSize } from "./ui/ButtonSize.js";
+export type { Hyperlink } from "./models/Hyperlink.js";
+export type { LinkCollectionItem } from "./models/LinkCollectionItem.js";
+export type { Employee, GitEmployee } from "./models/Employee.js";
+export * from "./models/ComboBoxItem.js";
+export * from "./models/NavbarItem.js";
+export * from "./models/NotifyModel.js";
+export * from "./util/ClickOutside.js";
+export * from "./util/CronParser.js";
+export { dayjs } from "./util/dayjs.js";
+export type { Dayjs, ConfigType, OpUnitType, QUnitType, UnitType, } from "./util/dayjs.js";
+export * from "./util/DateFunctions.js";
+export * from "./util/DragDrop.js";
+export * from "./util/Transitions.js";
+export * from "./util/interceptLinkClick.js";
+export * from "./util/NavigateTo.js";
+export * from "./display/filetree/index.js";
+export * from "./theme.svelte.js";
+export * from "./uiTheme.svelte.js";
+export * from "./ui/Toast.svelte.js";

package/dist/index.js

@@ -1,78 +1,77 @@
-// UI Components
-export { default as Button } from './ui/Button.svelte';
-export { default as ActionIcon } from './ui/ActionIcon.svelte';
-export { default as Badge } from './ui/Badge.svelte';
-export { default as Dialog } from './ui/Dialog.svelte';
-export { default as Drawer } from './ui/Drawer.svelte';
-export { default as Dropdown } from './ui/Dropdown.svelte';
-export { default as Dropzone } from './ui/Dropzone.svelte';
-export { default as Link } from './ui/Link.svelte';
-export { default as Loader } from './ui/Loader.svelte';
-export { default as Pagination } from './ui/Pagination.svelte';
-export { default as Popover } from './ui/Popover.svelte';
-export { default as Tabs } from './ui/Tabs.svelte';
-export { default as Table } from './ui/Table.svelte';
-export { default as ThemeSwitcher } from './ui/ThemeSwitcher.svelte';
-export { default as Toaster } from './ui/Toaster.svelte';
-export { default as Tooltip } from './ui/Tooltip.svelte';
-// New UI Components
-export { default as ProgressBar } from './ui/ProgressBar.svelte';
-export { default as Progress } from './ui/Progress.svelte';
-export { default as Skeleton } from './ui/Skeleton.svelte';
-export { default as LoadingOverlay } from './ui/LoadingOverlay.svelte';
-export { default as Accordion } from './ui/Accordion.svelte';
-export { default as RingProgress } from './ui/RingProgress.svelte';
-export { default as Breadcrumbs } from './ui/Breadcrumbs.svelte';
-export { default as Stepper } from './ui/Stepper.svelte';
-export { default as Timeline } from './ui/Timeline.svelte';
-// Display Components
-export { default as Alert } from './display/Alert.svelte';
-export { default as LinkCollection } from './display/LinkCollection.svelte';
-export { default as Paper } from './display/Paper.svelte';
-export { default as Avatar } from './display/Avatar.svelte';
-// Layout Components
-export { default as AppShell } from './layout/AppShell.svelte';
-export { default as Navbar } from './layout/Navbar.svelte';
-export { default as CustomNavbar } from './layout/CustomNavbar.svelte';
-export { default as Sidenav } from './layout/Sidenav.svelte';
-// Form Components
-export { default as Autocomplete } from './form/Autocomplete.svelte';
-export { default as AutocompleteMulti } from './form/AutocompleteMulti.svelte';
-export { default as Checkbox } from './form/Checkbox.svelte';
-export { default as ComboBoxItemBuilder } from './form/ComboBoxItemBuilder.svelte';
-export { default as CronBuilder } from './form/CronBuilder.svelte';
-export { default as DatePicker } from './form/DatePicker.svelte';
-export { default as DateRangePicker } from './form/DateRangePicker.svelte';
-export { default as TimePicker } from './form/TimePicker.svelte';
-export { default as DateTimePicker } from './form/DateTimePicker.svelte';
-export { default as FormGroup } from './form/FormGroup.svelte';
-export { default as Number } from './form/Number.svelte';
-export { default as Radio } from './form/Radio.svelte';
-export { default as RadioGroup } from './form/RadioGroup.svelte';
-export { default as Select } from './form/Select.svelte';
-export { default as SelectMulti } from './form/SelectMulti.svelte';
-export { default as SegmentedControl } from './form/SegmentedControl.svelte';
-export { default as TextArea } from './form/TextArea.svelte';
-export { default as Textbox } from './form/Textbox.svelte';
-export { default as Switch } from './form/Switch.svelte';
-export { default as Chips } from './form/Chips.svelte';
-// New Form Components
-export { default as PasswordInput } from './form/PasswordInput.svelte';
-export { default as Slider } from './form/Slider.svelte';
-export { default as Rating } from './form/Rating.svelte';
-export { default as FileInput } from './form/FileInput.svelte';
-// Icons
-export * from './icon/index.js';
-export * from './models/ComboBoxItem.js';
-export * from './models/NavbarItem.js';
-export * from './models/NotifyModel.js';
-// Utilities
-export * from './actions/ClickOutside.js';
-export * from './util/CronParser.js';
-export * from './util/DateFunctions.js';
-export * from './util/interceptLinkClick.js';
-export * from './transitions/Transitions.js';
-export * from './util/NavigateTo.js';
-// Theme
-export * from './theme.svelte.js';
-export * from './ui/Toast.svelte.js';
+export { default as Accordion } from "./ui/Accordion.svelte";
+export { default as AccordionItem } from "./ui/AccordionItem.svelte";
+export { default as Button } from "./ui/Button.svelte";
+export { default as ActionIcon } from "./ui/ActionIcon.svelte";
+export { default as Badge } from "./ui/Badge.svelte";
+export { default as Dialog } from "./ui/Dialog.svelte";
+export { default as Drawer } from "./ui/Drawer.svelte";
+export { default as Dropdown } from "./ui/Dropdown.svelte";
+export { default as Dropzone } from "./ui/Dropzone.svelte";
+export { default as Link } from "./ui/Link.svelte";
+export { default as Loader } from "./ui/Loader.svelte";
+export { default as Logo } from "./ui/Logo.svelte";
+export { default as Pagination } from "./ui/Pagination.svelte";
+export { default as Popover } from "./ui/Popover.svelte";
+export { default as ContextMenu } from "./ui/ContextMenu.svelte";
+export { default as ProgressBar } from "./ui/ProgressBar.svelte";
+export { default as Tabs } from "./ui/Tabs.svelte";
+export { default as Table } from "./ui/Table.svelte";
+export { default as ThemeSwitcher } from "./ui/ThemeSwitcher.svelte";
+export { default as Sortable } from "./ui/Sortable.svelte";
+export { default as MultiSortable } from "./ui/MultiSortable.svelte";
+export { default as Toaster } from "./ui/Toaster.svelte";
+export { default as Tooltip } from "./ui/Tooltip.svelte";
+export { default as Alert } from "./display/alert/Alert.svelte";
+export { default as LinkCollection } from "./display/LinkCollection.svelte";
+export { default as Navbar } from "./layout/Navbar.svelte";
+export { default as NavbarItemView } from "./layout/NavbarItemView.svelte";
+export { default as CustomNavbar } from "./layout/CustomNavbar.svelte";
+export { default as AppShell } from "./layout/AppShell.svelte";
+export { default as Sidenav } from "./layout/Sidenav.svelte";
+export { default as Paper } from "./display/Paper.svelte";
+export { default as Avatar } from "./display/Avatar.svelte";
+export { default as Autocomplete } from "./form/Autocomplete.svelte";
+export { default as AutocompleteMulti } from "./form/AutocompleteMulti.svelte";
+export { default as Checkbox } from "./form/Checkbox.svelte";
+export { default as ComboBoxItemBuilder } from "./form/ComboBoxItemBuilder.svelte";
+export { default as StringArrayBuilder } from "./form/StringArrayBuilder.svelte";
+export { default as CronBuilder } from "./form/CronBuilder.svelte";
+export { default as DatePicker } from "./form/DatePicker.svelte";
+export { default as DateRangePicker } from "./form/DateRangePicker.svelte";
+export { default as TimePicker } from "./form/TimePicker.svelte";
+export { default as DateTimePicker } from "./form/DateTimePicker.svelte";
+export { default as FormGroup } from "./form/FormGroup.svelte";
+export { default as Number } from "./form/Number.svelte";
+export { default as Radio } from "./form/Radio.svelte";
+export { default as RadioGroup } from "./form/RadioGroup.svelte";
+export { default as Select } from "./form/Select.svelte";
+export { default as SelectMulti } from "./form/SelectMulti.svelte";
+export { default as SegmentedControl } from "./form/SegmentedControl.svelte";
+export { default as TextArea } from "./form/TextArea.svelte";
+export { default as Textbox } from "./form/Textbox.svelte";
+export { default as Slider } from "./form/Slider.svelte";
+export { default as Switch } from "./form/Switch.svelte";
+export { default as Chips } from "./form/Chips.svelte";
+export { default as ColorPicker } from "./form/ColorPicker.svelte";
+export { parseColor, parseHex, toHex, formatColor, rgbToHsv, hsvToRgb, rgbToHsl, } from "./form/ColorPicker.svelte";
+export { default as TipTap } from "./editors/tiptap/TipTap.svelte";
+export { default as TipTapBubble } from "./editors/tiptap/TipTapBubble.svelte";
+export { CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage, } from "./editors/tiptap/extensions/index.js";
+export { default as CodeMirror } from "./editors/CodeMirror.svelte";
+export { default as GitCard } from "./cards/GitCard.svelte";
+export * from "./icon/index.js";
+export * from "./models/ComboBoxItem.js";
+export * from "./models/NavbarItem.js";
+export * from "./models/NotifyModel.js";
+export * from "./util/ClickOutside.js";
+export * from "./util/CronParser.js";
+export { dayjs } from "./util/dayjs.js";
+export * from "./util/DateFunctions.js";
+export * from "./util/DragDrop.js";
+export * from "./util/Transitions.js";
+export * from "./util/interceptLinkClick.js";
+export * from "./util/NavigateTo.js";
+export * from "./display/filetree/index.js";
+export * from "./theme.svelte.js";
+export * from "./uiTheme.svelte.js";
+export * from "./ui/Toast.svelte.js";

package/dist/layout/AppShell.svelte

@@ -1,169 +1,19 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import '../styles/index.css';
+	import '../bootstrap.min.css';
+	import '../app.css';
 
-	interface Props {
-		/** Header/navbar content */
-		header?: Snippet;
-		/** Left sidebar content */
-		aside?: Snippet;
-		/** Right sidebar content */
-		asideRight?: Snippet;
-		/** Footer content */
-		footer?: Snippet;
-		/** Main content */
-		children?: Snippet;
-		/** Width of the left aside */
-		asideWidth?: string;
-		/** Width of the right aside */
-		asideRightWidth?: string;
-		/** Height of the header */
-		headerHeight?: string;
-		/** Height of the footer */
-		footerHeight?: string;
-		/** Whether the header is fixed/sticky */
-		fixedHeader?: boolean;
-		/** Whether the aside is fixed */
-		fixedAside?: boolean;
-		/** Additional class for the shell */
-		class?: string;
+	export interface AppShellProps {
+		/** Application content (includes global styles) */
+		children: Snippet;
 	}
 
-	let {
-		header,
-		aside,
-		asideRight,
-		footer,
-		children,
-		asideWidth = '260px',
-		asideRightWidth = '260px',
-		headerHeight = 'auto',
-		footerHeight = '60px',
-		fixedHeader = true,
-		fixedAside = true,
-		class: className = ''
-	}: Props = $props();
-
-	const hasAside = $derived(!!aside);
-	const hasAsideRight = $derived(!!asideRight);
-	const hasHeader = $derived(!!header);
-	const hasFooter = $derived(!!footer);
+	let { children }: AppShellProps = $props();
 </script>
 
-<div
-	class="app-shell {className}"
-	class:has-aside={hasAside}
-	class:has-aside-right={hasAsideRight}
-	class:has-header={hasHeader}
-	class:has-footer={hasFooter}
-	class:fixed-header={fixedHeader}
-	class:fixed-aside={fixedAside}
-	style:--app-shell-aside-width={asideWidth}
-	style:--app-shell-aside-right-width={asideRightWidth}
-	style:--app-shell-header-height={headerHeight}
-	style:--app-shell-footer-height={footerHeight}
->
-	{#if header}
-		<header class="app-shell-header">
-			{@render header()}
-		</header>
-	{/if}
-
-	<div class="app-shell-body">
-		{#if aside}
-			<aside class="app-shell-aside">
-				{@render aside()}
-			</aside>
-		{/if}
-
-		<main class="app-shell-main">
-			{@render children?.()}
-		</main>
-
-		{#if asideRight}
-			<aside class="app-shell-aside-right">
-				{@render asideRight()}
-			</aside>
-		{/if}
-	</div>
-
-	{#if footer}
-		<footer class="app-shell-footer">
-			{@render footer()}
-		</footer>
-	{/if}
-</div>
-
-<style>
-	.app-shell {
-		display: flex;
-		flex-direction: column;
-		min-height: 100vh;
-	}
-
-	.app-shell-header {
-		height: var(--app-shell-header-height);
-		flex-shrink: 0;
-	}
-
-	.fixed-header .app-shell-header {
-		position: sticky;
-		top: 0;
-		z-index: var(--pui-z-sticky, 100);
-	}
-
-	.app-shell-body {
-		display: flex;
-		flex: 1;
-		min-height: 0;
-	}
-
-	.app-shell-aside {
-		width: var(--app-shell-aside-width);
-		flex-shrink: 0;
-		overflow-y: auto;
-	}
-
-	.fixed-aside .app-shell-aside {
-		position: sticky;
-		top: var(--app-shell-header-height);
-		height: calc(100vh - var(--app-shell-header-height));
-		align-self: flex-start;
-	}
-
-	.fixed-aside.has-footer .app-shell-aside {
-		height: calc(100vh - var(--app-shell-header-height) - var(--app-shell-footer-height));
-	}
-
-	.app-shell-aside-right {
-		width: var(--app-shell-aside-right-width);
-		flex-shrink: 0;
-		overflow-y: auto;
-	}
-
-	.fixed-aside .app-shell-aside-right {
-		position: sticky;
-		top: var(--app-shell-header-height);
-		height: calc(100vh - var(--app-shell-header-height));
-		align-self: flex-start;
-	}
-
-	.app-shell-main {
-		flex: 1;
-		min-width: 0;
-		overflow-x: hidden;
-	}
-
-	.app-shell-footer {
-		height: var(--app-shell-footer-height);
-		flex-shrink: 0;
-	}
-
-	/* Responsive behavior */
-	@media (max-width: 768px) {
-		.app-shell-aside,
-		.app-shell-aside-right {
-			display: none;
-		}
-	}
-</style>
+<!--
+	AppShell loads the library's base stylesheet plus the bundled Bootstrap 5 build.
+	To use the library without Bootstrap, skip AppShell and import
+	`@placeholderco/placeholder-ui/app.css` directly in your root layout instead.
+-->
+{@render children?.()}