-- Hoogle documentation, generated by Haddock -- See Hoogle, http://www.haskell.org/hoogle/ -- | Type-safe HTML and CSS with intuitive layouts and composable styles. -- -- Type-safe HTML and CSS with intuitive layouts and composable styles. -- Inspired by Tailwindcss and Elm-UI . See documentation for the -- Web.View module below @package web-view @version 0.6.2 module Web.View.Reset -- | Default CSS to remove unintuitive default styles. This or -- cssResetLink is required. -- -- 
--   import Data.String.Interpolate (i)
--   
--   toDocument :: ByteString -> ByteString
--   toDocument cnt =
--     [i|<html>
--       <head>
--         <style type="text/css">#{cssResetEmbed}</style>
--       </head>
--       <body>#{cnt}</body>
--     </html>|]
--
cssResetEmbed :: ByteString -- | Alternatively, the reset is available on a CDN -- -- 
--   import Data.String.Interpolate (i)
--   
--   toDocument :: ByteString -> ByteString
--   toDocument cnt =
--     [i|<html>
--       <head>
--         <link rel="stylesheet" href="#{cssResetLink}">
--       </head>
--       <body>#{cnt}</body>
--     </html>|]
--
cssResetLink :: Text module Web.View.Types data Content Node :: Element -> Content Text :: Text -> Content -- | Raw embedded HTML or SVG. See raw Raw :: Text -> Content -- | A single HTML tag. Note that the class attribute is stored separately -- from the rest of the attributes to make adding styles easier data Element Element :: Bool -> Name -> Attributes () -> [Content] -> Element [inline] :: Element -> Bool [name] :: Element -> Name [attributes] :: Element -> Attributes () [children] :: Element -> [Content] -- | Construct an Element element :: forall {k} (c :: k). Name -> Attributes c -> [Content] -> Element -- | The Attributes for an Element. Classes are merged and managed -- separately from the other attributes. data Attributes (c :: k) Attributes :: CSS -> Map Name AttValue -> Attributes (c :: k) [classes] :: Attributes (c :: k) -> CSS [other] :: Attributes (c :: k) -> Map Name AttValue type Attribute = (Name, AttValue) type Name = Text type AttValue = Text -- | Element functions expect a modifier function as their first argument. -- These can add attributes and classes. Combine multiple Mods -- with (.) -- -- 
--   userEmail :: User -> View c ()
--   userEmail user = input (fontSize 16 . active) (text user.email)
--     where
--       active = isActive user then bold else id
--
-- -- If you don't want to specify any attributes, you can use id -- -- 
--   plainView :: View c ()
--   plainView = el id "No styles"
--
type Mod context = Attributes context -> Attributes context -- | All the atomic classes used in a View type CSS = Map Selector Class -- | Atomic classes include a selector and the corresponding styles data Class Class :: Selector -> Styles -> Class [selector] :: Class -> Selector [properties] :: Class -> Styles -- | The styles to apply for a given atomic Class type Styles = Map Name StyleValue -- | A parent selector limits the selector to only apply when a descendent -- of the parent in question type Ancestor = Text -- | A child selector limits data ChildCombinator AllChildren :: ChildCombinator ChildWithName :: Text -> ChildCombinator -- | The selector to use for the given atomic Class data Selector Selector :: Maybe Media -> Maybe Ancestor -> Maybe ChildCombinator -> Maybe Pseudo -> ClassName -> Selector [media] :: Selector -> Maybe Media [ancestor] :: Selector -> Maybe Ancestor [child] :: Selector -> Maybe ChildCombinator [pseudo] :: Selector -> Maybe Pseudo [className] :: Selector -> ClassName -- | Create a Selector given only a ClassName selector :: ClassName -> Selector -- | A class name newtype ClassName ClassName :: Text -> ClassName [text] :: ClassName -> Text -- | Create a class name, escaping special characters className :: Text -> ClassName -- | Convert a type into a className segment to generate unique compound -- style names based on the value class ToClassName a toClassName :: ToClassName a => a -> ClassName ($dmtoClassName) :: (ToClassName a, Show a) => a -> ClassName -- | Psuedos allow for specifying styles that only apply in certain -- conditions. See hover etc -- -- 
--   el (color Primary . hover (color White)) "hello"
--
data Pseudo Hover :: Pseudo Active :: Pseudo Even :: Pseudo Odd :: Pseudo -- | The value of a css style property newtype StyleValue StyleValue :: String -> StyleValue -- | Use a type as a css style property value class ToStyleValue a toStyleValue :: ToStyleValue a => a -> StyleValue ($dmtoStyleValue) :: (ToStyleValue a, Show a) => a -> StyleValue data Length PxRem :: PxRem -> Length Pct :: Float -> Length -- | Px, converted to Rem. Allows for the user to change the document font -- size and have the app scale accordingly. But allows the programmer to -- code in pixels to match a design newtype PxRem PxRem' :: Int -> PxRem -- | Milliseconds, used for transitions newtype Ms Ms :: Int -> Ms -- | Media allows for responsive designs that change based on -- characteristics of the window. See Layout Example data Media MinWidth :: Int -> Media MaxWidth :: Int -> Media -- | Options for styles that support specifying various sides. This has a -- "fake" Num instance to support literals -- -- 
--   border 5
--   border (X 2)
--   border (TRBL 0 5 0 0)
--
data Sides a All :: a -> Sides a TRBL :: a -> a -> a -> a -> Sides a X :: a -> Sides a Y :: a -> Sides a XY :: a -> a -> Sides a T :: a -> Sides a R :: a -> Sides a B :: a -> Sides a L :: a -> Sides a -- | Element's attributes do not include class, which is separated. -- FlatAttributes generate the class attribute and include it newtype FlatAttributes FlatAttributes :: Map Name AttValue -> FlatAttributes [attributes] :: FlatAttributes -> Map Name AttValue -- | ToColor allows you to create a type containing your application's -- colors: -- -- 
--   data AppColor
--     = White
--     | Primary
--     | Dark
--   
--   instance ToColor AppColor where
--     colorValue White = "#FFF"
--     colorValue Dark = "#333"
--     colorValue Primary = "#00F"
--   
--   hello :: View c ()
--   hello = el (bg Primary . color White) "Hello"
--
class ToColor a colorValue :: ToColor a => a -> HexColor colorName :: ToColor a => a -> Text ($dmcolorName) :: (ToColor a, Show a) => a -> Text -- | Hexidecimal Color. Can be specified with or without the leading -- #. Recommended to use an AppColor type instead of manually -- using hex colors. See ToColor newtype HexColor HexColor :: Text -> HexColor data Align AlignCenter :: Align AlignLeft :: Align AlignRight :: Align AlignJustify :: Align data None None :: None instance GHC.Enum.Enum Web.View.Types.PxRem instance forall k (c :: k). GHC.Classes.Eq (Web.View.Types.Attributes c) instance GHC.Classes.Eq Web.View.Types.ChildCombinator instance GHC.Classes.Eq Web.View.Types.Class instance GHC.Classes.Eq Web.View.Types.ClassName instance GHC.Classes.Eq Web.View.Types.Content instance GHC.Classes.Eq Web.View.Types.Element instance GHC.Classes.Eq Web.View.Types.Media instance GHC.Classes.Eq Web.View.Types.Pseudo instance GHC.Classes.Eq Web.View.Types.PxRem instance GHC.Classes.Eq Web.View.Types.Selector instance GHC.Classes.Eq Web.View.Types.StyleValue instance GHC.Generics.Generic Web.View.Types.FlatAttributes instance GHC.Real.Integral Web.View.Types.PxRem instance Data.String.IsString Web.View.Types.ChildCombinator instance Data.String.IsString Web.View.Types.ClassName instance Data.String.IsString Web.View.Types.HexColor instance Data.String.IsString Web.View.Types.Selector instance Data.String.IsString Web.View.Types.StyleValue instance forall k (c :: k). GHC.Base.Monoid (Web.View.Types.Attributes c) instance GHC.Base.Monoid Web.View.Types.ClassName instance GHC.Base.Monoid Web.View.Types.StyleValue instance GHC.Num.Num Web.View.Types.Length instance GHC.Num.Num Web.View.Types.Ms instance GHC.Num.Num Web.View.Types.PxRem instance GHC.Num.Num a => GHC.Num.Num (Web.View.Types.Sides a) instance GHC.Classes.Ord Web.View.Types.ChildCombinator instance GHC.Classes.Ord Web.View.Types.ClassName instance GHC.Classes.Ord Web.View.Types.Media instance GHC.Classes.Ord Web.View.Types.Pseudo instance GHC.Classes.Ord Web.View.Types.PxRem instance GHC.Classes.Ord Web.View.Types.Selector instance GHC.Real.Real Web.View.Types.PxRem instance forall k (c :: k). GHC.Base.Semigroup (Web.View.Types.Attributes c) instance GHC.Base.Semigroup Web.View.Types.ClassName instance GHC.Base.Semigroup Web.View.Types.StyleValue instance GHC.Show.Show Web.View.Types.Align instance forall k (c :: k). GHC.Show.Show (Web.View.Types.Attributes c) instance GHC.Show.Show Web.View.Types.ChildCombinator instance GHC.Show.Show Web.View.Types.Class instance GHC.Show.Show Web.View.Types.ClassName instance GHC.Show.Show Web.View.Types.Content instance GHC.Show.Show Web.View.Types.Element instance GHC.Show.Show Web.View.Types.HexColor instance GHC.Show.Show Web.View.Types.Length instance GHC.Show.Show Web.View.Types.Media instance GHC.Show.Show Web.View.Types.Ms instance GHC.Show.Show Web.View.Types.None instance GHC.Show.Show Web.View.Types.Pseudo instance GHC.Show.Show Web.View.Types.PxRem instance GHC.Show.Show Web.View.Types.Selector instance GHC.Show.Show Web.View.Types.StyleValue instance Web.View.Types.ToClassName Web.View.Types.Align instance Web.View.Types.ToClassName GHC.Types.Float instance Web.View.Types.ToClassName Web.View.Types.HexColor instance Web.View.Types.ToClassName GHC.Types.Int instance Web.View.Types.ToClassName Web.View.Types.Length instance Web.View.Types.ToClassName Web.View.Types.Ms instance Web.View.Types.ToClassName Web.View.Types.None instance Web.View.Types.ToClassName Web.View.Types.PxRem instance Web.View.Types.ToClassName Data.Text.Internal.Text instance Web.View.Types.ToClassName () instance Web.View.Types.ToColor Web.View.Types.HexColor instance Web.View.Types.ToStyleValue Web.View.Types.Align instance Web.View.Types.ToStyleValue GHC.Types.Float instance Web.View.Types.ToStyleValue Web.View.Types.HexColor instance Web.View.Types.ToStyleValue GHC.Types.Int instance Web.View.Types.ToStyleValue Web.View.Types.Length instance Web.View.Types.ToStyleValue GHC.Base.String instance Web.View.Types.ToStyleValue Web.View.Types.Ms instance Web.View.Types.ToStyleValue Web.View.Types.None instance Web.View.Types.ToStyleValue Web.View.Types.PxRem instance Web.View.Types.ToStyleValue Web.View.Types.StyleValue instance Web.View.Types.ToStyleValue Data.Text.Internal.Text module Web.View.Style -- | Set to a specific width width :: Length -> Mod c -- | Set to a specific height height :: Length -> Mod c -- | Allow width to grow to contents but not shrink any smaller than value minWidth :: Length -> Mod c -- | Allow height to grow to contents but not shrink any smaller than value minHeight :: Length -> Mod c -- | Space surrounding the children of the element -- -- To create even spacing around and between all elements: -- -- 
--   col (pad 10 . gap 10) $ do
--     el_ "one"
--     el_ "two"
--     el_ "three"
--
pad :: Sides Length -> Mod c -- | The space between child elements. See pad gap :: Length -> Mod c fontSize :: Length -> Mod c -- | Add a drop shadow to an element -- -- 
--   input (shadow Inner) "Inset Shadow"
--   button (shadow ()) "Click Me"
--
shadow :: (Style Shadow a, ToClassName a) => a -> Mod c data Shadow data Inner Inner :: Inner -- | Round the corners of the element rounded :: Length -> Mod c -- | Set the background color. See ToColor bg :: ToColor clr => clr -> Mod ctx -- | Set the text color. See ToColor color :: ToColor clr => clr -> Mod ctx bold :: Mod c italic :: Mod c underline :: Mod c -- | Set the list style of an item -- -- 
--   ol id $ do
--     li (list Decimal) "First"
--     li (list Decimal) "Second"
--     li (list Decimal) "Third"
--
list :: (ToClassName a, Style ListType a) => a -> Mod c data ListType Decimal :: ListType Disc :: ListType opacity :: Float -> Mod c -- | Set a border around the element -- -- 
--   el (border 1) "all sides"
--   el (border (X 1)) "only left and right"
--
border :: Sides PxRem -> Mod c -- | Set a border color. See ToColor borderColor :: ToColor clr => clr -> Mod ctx -- | Use a button-like cursor when hovering over the element -- -- Button-like elements: -- -- 
--   btn = pointer . bg Primary . hover (bg PrimaryLight)
--   
--   options = row id $ do
--     el btn "Login"
--     el btn "Sign Up"
--
pointer :: Mod c -- | Animate changes to the given property -- -- 
--   el (transition 100 (Height 400)) "Tall"
--   el (transition 100 (Height 100)) "Small"
--
transition :: Ms -> TransitionProperty -> Mod c data TransitionProperty Width :: PxRem -> TransitionProperty Height :: PxRem -> TransitionProperty BgColor :: HexColor -> TransitionProperty Color :: HexColor -> TransitionProperty textAlign :: Align -> Mod c -- | Set Top, Right, Bottom and Left. Requires position Absolute or -- Fixed. Also see popup offset :: Sides Length -> Mod c -- | position:absolute. See stack and popout position :: Position -> Mod c data Position Absolute :: Position Fixed :: Position Sticky :: Position Relative :: Position zIndex :: Int -> Mod c -- | Set container display -- -- el (display None) HIDDEN display :: (Style Display a, ToClassName a) => a -> Mod c data Display Block :: Display -- | Apply when hovering over an element -- -- 
--   el (bg Primary . hover (bg PrimaryLight)) "Hover"
--
hover :: Mod c -> Mod c -- | Apply when the mouse is pressed down on an element active :: Mod c -> Mod c -- | Apply to even-numbered children even :: Mod c -> Mod c -- | Apply to odd-numbered children odd :: Mod c -> Mod c -- | Apply when the Media matches the current window. This allows for -- responsive designs -- -- 
--   el (width 100 . media (MinWidth 800) (width 400))
--     "Big if window > 800"
--
media :: Media -> Mod c -> Mod c -- | Apply when the element is somewhere inside an anscestor. -- -- For example, the HTMX library applies an "htmx-request" class to the -- body when a request is pending. We can use this to create a loading -- indicator -- -- 
--   el (pad 10) $ do
--     el (parent "htmx-request" flexRow . hide) "Loading..."
--     el (parent "htmx-request" hide . flexRow) "Normal Content"
--
parent :: Text -> Mod c -> Mod c applyPseudo :: Pseudo -> Mod c -> Mod c mapModClass :: (Class -> Class) -> Mod c -> Mod c -- | Add a single class -- -- 
--   width :: PxRem -> Mod
--   width n =
--     addClass
--       $ cls ("w" -. n)
--       & prop "width" n
--       & prop @Int "flex-shrink" 0
--
addClass :: Class -> Mod c -- | Construct a class from a ClassName cls :: ClassName -> Class -- | Construct a mod from a ClassName with no CSS properties. Convenience -- for situations where external CSS classes need to be referenced. -- -- 
--   el (extClass "btn" . extClass "btn-primary") "Click me!"
--
extClass :: ClassName -> Mod c -- | Add a property to a class prop :: ToStyleValue val => Name -> val -> Class -> Class -- | Hyphenate classnames (-.) :: ToClassName a => ClassName -> a -> ClassName infixl 6 -. class Style (style :: k) value styleValue :: Style style value => value -> StyleValue ($dmstyleValue) :: (Style style value, ToStyleValue value) => value -> StyleValue instance GHC.Show.Show Web.View.Style.Display instance GHC.Show.Show Web.View.Style.Inner instance GHC.Show.Show Web.View.Style.ListType instance GHC.Show.Show Web.View.Style.Position instance GHC.Show.Show Web.View.Style.TransitionProperty instance Web.View.Style.Style Web.View.Style.Display Web.View.Style.Display instance Web.View.Style.Style Web.View.Style.Display Web.View.Types.None instance Web.View.Style.Style Web.View.Style.ListType Web.View.Style.ListType instance Web.View.Style.Style Web.View.Style.ListType Web.View.Types.None instance Web.View.Style.Style Web.View.Style.Shadow Web.View.Style.Inner instance Web.View.Style.Style Web.View.Style.Shadow Web.View.Types.None instance Web.View.Style.Style Web.View.Style.Shadow () instance Web.View.Types.ToClassName Web.View.Style.Display instance Web.View.Types.ToClassName Web.View.Style.Inner instance Web.View.Types.ToClassName Web.View.Style.ListType instance Web.View.Types.ToClassName Web.View.Style.Position instance Web.View.Types.ToStyleValue Web.View.Style.Display instance Web.View.Types.ToStyleValue Web.View.Style.ListType instance Web.View.Types.ToStyleValue Web.View.Style.Position module Web.View.Types.Url type Segment = Text pathUrl :: [Segment] -> Url cleanSegment :: Segment -> Segment pathSegments :: Text -> [Segment] data Url Url :: Text -> Text -> [Segment] -> Query -> Url [scheme] :: Url -> Text [domain] :: Url -> Text [path] :: Url -> [Segment] [query] :: Url -> Query url :: Text -> Url renderUrl :: Url -> Text instance GHC.Classes.Eq Web.View.Types.Url.Url instance Data.String.IsString Web.View.Types.Url.Url instance GHC.Base.Monoid Web.View.Types.Url.Url instance GHC.Read.Read Web.View.Types.Url.Url instance GHC.Base.Semigroup Web.View.Types.Url.Url instance GHC.Show.Show Web.View.Types.Url.Url module Web.View.View -- | Views are HTML fragments that carry all CSS used by any child -- element. -- -- 
--   view :: View c ()
--   view = col (pad 10 . gap 10) $ do
--     el bold "Hello"
--     el_ "World"
--
-- -- They can also have a context which can be used to create type-safe or -- context-aware elements. See context or table for an -- example newtype View context a View :: Eff '[Reader context, State ViewState] a -> View context a [viewState] :: View context a -> Eff '[Reader context, State ViewState] a data ViewState ViewState :: [Content] -> CSS -> ViewState [contents] :: ViewState -> [Content] [css] :: ViewState -> CSS -- | Extract the ViewState from a View runView :: context -> View context () -> ViewState -- | Views have a Reader built-in for convienient access to static -- data, and to add type-safety to view functions. See -- 'Web.View.Element.ListItem and -- https://hackage.haskell.org/package/hyperbole/docs/Web-Hyperbole.html -- -- 
--   numberView :: View Int ()
--   numberView = do
--     num <- context
--     el_ $ do
--       "Number: "
--       text (pack $ show num)
--
context :: View context context -- | Run a view with a specific context in a parent View with -- a different context. -- -- 
--   parentView :: View c ()
--   parentView = do
--     addContext 1 numberView
--     addContext 2 numberView
--     addContext 3 numberView
--
addContext :: context -> View context () -> View c () viewModContents :: ([Content] -> [Content]) -> View context () viewModCss :: (CSS -> CSS) -> View context () viewAddClasses :: CSS -> View c () viewAddContent :: Content -> View c () -- | Inserts contents into the first child element viewInsertContents :: [Content] -> View c () -- | Create a new element constructor with the given tag name -- -- 
--   aside :: Mod c -> View c () -> View c ()
--   aside = tag "aside"
--
tag :: Text -> Mod c -> View c () -> View c () -- | Create a new element constructor with a custom element - > span :: -- Mod c -> View c () -> View c () > span = tag' (Element True) -- "span" tag' :: (Attributes c -> [Content] -> Element) -> Mod c -> View c () -> View c () -- | Set an attribute, replacing existing value -- -- 
--   hlink :: Text -> View c () -> View c ()
--   hlink url content = tag "a" (att "href" url) content
--
att :: Name -> AttValue -> Mod c instance GHC.Base.Applicative (Web.View.View.View context) instance GHC.Base.Functor (Web.View.View.View context) instance Data.String.IsString (Web.View.View.View context ()) instance GHC.Base.Monad (Web.View.View.View context) instance GHC.Base.Semigroup Web.View.View.ViewState module Web.View.Render -- | Renders a View as HTML with embedded CSS class definitions -- -- 
--   >>> renderText $ el bold "Hello"
--   <style type='text/css'>.bold { font-weight:bold }</style>
--   <div class='bold'>Hello</div>
--
renderText :: View () () -> Text renderLazyText :: View () () -> Text renderLazyByteString :: View () () -> ByteString data Line Line :: LineEnd -> Int -> Text -> Line [end] :: Line -> LineEnd [indent] :: Line -> Int [text] :: Line -> Text data LineEnd Newline :: LineEnd Inline :: LineEnd -- | Render lines to text renderLines :: [Line] -> Text -- | Render with the specified view context -- -- 
--   renderText' () $ el bold "Hello"
--
renderText' :: c -> View c () -> Text renderContent :: Int -> Content -> [Line] renderTag :: Int -> Element -> [Line] addIndent :: Int -> Line -> Line renderCSS :: CSS -> [Line] indent :: Text -> Text -- | The css selector for this style selectorText :: Selector -> Text -- | Unique name for the class, as seen in the element's class attribute attributeClassName :: Selector -> ClassName pseudoText :: Pseudo -> Text -- | The Attributes for an element, inclusive of class. flatAttributes :: Element -> FlatAttributes instance GHC.Classes.Eq Web.View.Render.Line instance GHC.Classes.Eq Web.View.Render.LineEnd instance GHC.Show.Show Web.View.Render.Line instance GHC.Show.Show Web.View.Render.LineEnd module Web.View.Element -- | A basic element -- -- 
--   el (bold . pad 10) "Hello"
--
el :: Mod c -> View c () -> View c () -- | A basic element, with no modifiers -- -- 
--   el_ "Hello"
--
el_ :: View c () -> View c () -- | Add text to a view. Not required for string literals -- -- 
--   el_ $ do
--     "Hello: "
--     text user.name
--
text :: Text -> View c () -- | Embed static, unescaped HTML or SVG. Take care not to use raw -- with user-generated content. -- -- 
--   spinner = raw "<svg>...</svg>"
--
raw :: Text -> View c () -- | Do not show any content -- -- 
--   if isVisible
--    then content
--    else none
--
none :: View c () pre :: Mod c -> Text -> View c () code :: Mod c -> Text -> View c () -- | A hyperlink to the given url link :: Url -> Mod c -> View c () -> View c () form :: Mod c -> View c () -> View c () input :: Mod c -> View c () name :: Text -> Mod c value :: Text -> Mod c label :: Mod c -> View c () -> View c () button :: Mod c -> View c () -> View c () script :: Text -> View c () style :: Text -> View c () stylesheet :: Text -> View c () -- | Create a type safe data table by specifying columns -- -- 
--   usersTable :: [User] -> View c ()
--   usersTable us = do
--     table id us $ do
--       tcol (th hd "Name") $ \u -> td cell $ text u.name
--       tcol (th hd "Email") $ \u -> td cell $ text u.email
--    where
--     hd = cell . bold
--     cell = pad 4 . border 1
--
table :: Mod c -> [dt] -> Eff '[Writer [TableColumn c dt]] () -> View c () tcol :: forall dt c. View (TableHead c) () -> (dt -> View dt ()) -> Eff '[Writer [TableColumn c dt]] () th :: Mod c -> View c () -> View (TableHead c) () td :: Mod () -> View () () -> View dt () newtype TableHead a TableHead :: a -> TableHead a data TableColumn c dt TableColumn :: View (TableHead c) () -> (dt -> View dt ()) -> TableColumn c dt [headCell] :: TableColumn c dt -> View (TableHead c) () [dataCell] :: TableColumn c dt -> dt -> View dt () newtype ListItem c a ListItem :: View c a -> ListItem c a -- | List elements do not include any inherent styling but are useful for -- accessibility. See list. -- -- 
--   ol id $ do
--    let nums = list Decimal
--    li nums "one"
--    li nums "two"
--    li nums "three"
--
ol :: Mod c -> ListItem c () -> View c () ul :: Mod c -> ListItem c () -> View c () li :: Mod c -> View c () -> ListItem c () instance GHC.Base.Applicative (Web.View.Element.ListItem c) instance GHC.Base.Functor (Web.View.Element.ListItem c) instance GHC.Base.Monad (Web.View.Element.ListItem c) module Web.View.Layout -- | We can intuitively create layouts with combinations of row, -- col, stack, grow, and space -- -- Wrap main content in layout to allow the view to consume -- vertical screen space -- -- 
--   holygrail :: View c ()
--   holygrail = layout id $ do
--     row section "Top Bar"
--     row grow $ do
--       col section "Left Sidebar"
--       col (section . grow) "Main Content"
--       col section "Right Sidebar"
--     row section "Bottom Bar"
--     where section = border 1
--
layout :: Mod c -> View c () -> View c () -- | As layout but as a Mod -- -- 
--   holygrail = col root $ do
--     ...
--
root :: Mod c -- | Lay out children in a column. -- -- 
--   col grow $ do
--      el_ "Top"
--      space
--      el_ "Bottom"
--
col :: Mod c -> View c () -> View c () -- | Lay out children in a row -- -- 
--   row id $ do
--      el_ "Left"
--      space
--      el_ "Right"
--
row :: Mod c -> View c () -> View c () -- | Grow to fill the available space in the parent row or -- col -- -- 
--   row id $ do
--    el grow none
--    el_ "Right"
--
grow :: Mod c -- | Space that fills the available space in the parent row or -- col. -- -- 
--   row id $ do
--    space
--    el_ "Right"
--
-- -- This is equivalent to an empty element with grow -- -- 
--   space = el grow none
--
space :: View c () -- | Make a fixed layout by putting scroll on a child-element -- -- 
--   document = row root $ do
--     nav (width 300) "Sidebar"
--     col (grow . scroll) "Main Content"
--
scroll :: Mod c -- | A Nav element nav :: Mod c -> View c () -> View c () -- | Stack children on top of each other. Each child has the full width. -- See popout -- -- 
--   stack id $ do
--     row id "Background"
--     row (bg Black . opacity 0.5) "Overlay"
--
stack :: Mod c -> Layer c () -> View c () -- | A popout does not newtype Layer c a Layer :: View c a -> Layer c a -- | A normal layer contributes to the size of the parent layer :: View c () -> Layer c () -- | This child of a stack can pop out of the parent, covering -- content outside of it. Only usable inside stack -- -- 
--   stack id $ do
--     layer id $ input (value "Autocomplete Box")
--     layer (popout (TRBL 50 0 0 0)) $ do
--       el_ "Item 1"
--       el_ "Item 2"
--       el_ "Item 3"
--   el_ "This is covered by the menu"
--
popout :: Mod c -> View c () -> Layer c () -- | Hide an element. See display hide :: Mod c -- | Set container to be a row. Favor row when possible flexRow :: Mod c -- | Set container to be a column. Favor col when possible flexCol :: Mod c -- | Cut off the contents of the element truncate :: Mod c instance GHC.Base.Applicative (Web.View.Layout.Layer c) instance GHC.Base.Functor (Web.View.Layout.Layer c) instance GHC.Base.Monad (Web.View.Layout.Layer c) -- | Type-safe HTML and CSS with intuitive layout and composable styles. -- Inspired by Tailwindcss and Elm-UI module Web.View -- | Renders a View as HTML with embedded CSS class definitions -- -- 
--   >>> renderText $ el bold "Hello"
--   <style type='text/css'>.bold { font-weight:bold }</style>
--   <div class='bold'>Hello</div>
--
renderText :: View () () -> Text renderLazyText :: View () () -> Text renderLazyByteString :: View () () -> ByteString -- | Views are HTML fragments that carry all CSS used by any child -- element. -- -- 
--   view :: View c ()
--   view = col (pad 10 . gap 10) $ do
--     el bold "Hello"
--     el_ "World"
--
-- -- They can also have a context which can be used to create type-safe or -- context-aware elements. See context or table for an -- example data View context a -- | Element functions expect a modifier function as their first argument. -- These can add attributes and classes. Combine multiple Mods -- with (.) -- -- 
--   userEmail :: User -> View c ()
--   userEmail user = input (fontSize 16 . active) (text user.email)
--     where
--       active = isActive user then bold else id
--
-- -- If you don't want to specify any attributes, you can use id -- -- 
--   plainView :: View c ()
--   plainView = el id "No styles"
--
type Mod context = Attributes context -> Attributes context -- | A basic element -- -- 
--   el (bold . pad 10) "Hello"
--
el :: Mod c -> View c () -> View c () -- | A basic element, with no modifiers -- -- 
--   el_ "Hello"
--
el_ :: View c () -> View c () -- | We can intuitively create layouts with combinations of row, -- col, stack, grow, and space -- -- Wrap main content in layout to allow the view to consume -- vertical screen space -- -- 
--   holygrail :: View c ()
--   holygrail = layout id $ do
--     row section "Top Bar"
--     row grow $ do
--       col section "Left Sidebar"
--       col (section . grow) "Main Content"
--       col section "Right Sidebar"
--     row section "Bottom Bar"
--     where section = border 1
--
layout :: Mod c -> View c () -> View c () -- | As layout but as a Mod -- -- 
--   holygrail = col root $ do
--     ...
--
root :: Mod c -- | Lay out children in a column. -- -- 
--   col grow $ do
--      el_ "Top"
--      space
--      el_ "Bottom"
--
col :: Mod c -> View c () -> View c () -- | Lay out children in a row -- -- 
--   row id $ do
--      el_ "Left"
--      space
--      el_ "Right"
--
row :: Mod c -> View c () -> View c () -- | Space that fills the available space in the parent row or -- col. -- -- 
--   row id $ do
--    space
--    el_ "Right"
--
-- -- This is equivalent to an empty element with grow -- -- 
--   space = el grow none
--
space :: View c () -- | A Nav element nav :: Mod c -> View c () -> View c () -- | Stack children on top of each other. Each child has the full width. -- See popout -- -- 
--   stack id $ do
--     row id "Background"
--     row (bg Black . opacity 0.5) "Overlay"
--
stack :: Mod c -> Layer c () -> View c () -- | A popout does not data Layer c a -- | A normal layer contributes to the size of the parent layer :: View c () -> Layer c () -- | This child of a stack can pop out of the parent, covering -- content outside of it. Only usable inside stack -- -- 
--   stack id $ do
--     layer id $ input (value "Autocomplete Box")
--     layer (popout (TRBL 50 0 0 0)) $ do
--       el_ "Item 1"
--       el_ "Item 2"
--       el_ "Item 3"
--   el_ "This is covered by the menu"
--
popout :: Mod c -> View c () -> Layer c () -- | Make a fixed layout by putting scroll on a child-element -- -- 
--   document = row root $ do
--     nav (width 300) "Sidebar"
--     col (grow . scroll) "Main Content"
--
scroll :: Mod c -- | Grow to fill the available space in the parent row or -- col -- -- 
--   row id $ do
--    el grow none
--    el_ "Right"
--
grow :: Mod c -- | Set container to be a row. Favor row when possible flexRow :: Mod c -- | Set container to be a column. Favor col when possible flexCol :: Mod c -- | Hide an element. See display hide :: Mod c -- | Cut off the contents of the element truncate :: Mod c -- | Add text to a view. Not required for string literals -- -- 
--   el_ $ do
--     "Hello: "
--     text user.name
--
text :: Text -> View c () -- | Embed static, unescaped HTML or SVG. Take care not to use raw -- with user-generated content. -- -- 
--   spinner = raw "<svg>...</svg>"
--
raw :: Text -> View c () -- | Do not show any content -- -- 
--   if isVisible
--    then content
--    else none
--
none :: View c () pre :: Mod c -> Text -> View c () code :: Mod c -> Text -> View c () form :: Mod c -> View c () -> View c () input :: Mod c -> View c () name :: Text -> Mod c value :: Text -> Mod c label :: Mod c -> View c () -> View c () -- | A hyperlink to the given url link :: Url -> Mod c -> View c () -> View c () button :: Mod c -> View c () -> View c () -- | List elements do not include any inherent styling but are useful for -- accessibility. See list. -- -- 
--   ol id $ do
--    let nums = list Decimal
--    li nums "one"
--    li nums "two"
--    li nums "three"
--
ol :: Mod c -> ListItem c () -> View c () ul :: Mod c -> ListItem c () -> View c () li :: Mod c -> View c () -> ListItem c () -- | Create a type safe data table by specifying columns -- -- 
--   usersTable :: [User] -> View c ()
--   usersTable us = do
--     table id us $ do
--       tcol (th hd "Name") $ \u -> td cell $ text u.name
--       tcol (th hd "Email") $ \u -> td cell $ text u.email
--    where
--     hd = cell . bold
--     cell = pad 4 . border 1
--
table :: Mod c -> [dt] -> Eff '[Writer [TableColumn c dt]] () -> View c () tcol :: forall dt c. View (TableHead c) () -> (dt -> View dt ()) -> Eff '[Writer [TableColumn c dt]] () th :: Mod c -> View c () -> View (TableHead c) () td :: Mod () -> View () () -> View dt () data TableHead a data TableColumn c dt script :: Text -> View c () style :: Text -> View c () stylesheet :: Text -> View c () -- | Set to a specific width width :: Length -> Mod c -- | Set to a specific height height :: Length -> Mod c -- | Allow width to grow to contents but not shrink any smaller than value minWidth :: Length -> Mod c -- | Allow height to grow to contents but not shrink any smaller than value minHeight :: Length -> Mod c -- | Space surrounding the children of the element -- -- To create even spacing around and between all elements: -- -- 
--   col (pad 10 . gap 10) $ do
--     el_ "one"
--     el_ "two"
--     el_ "three"
--
pad :: Sides Length -> Mod c -- | The space between child elements. See pad gap :: Length -> Mod c opacity :: Float -> Mod c -- | Add a drop shadow to an element -- -- 
--   input (shadow Inner) "Inset Shadow"
--   button (shadow ()) "Click Me"
--
shadow :: (Style Shadow a, ToClassName a) => a -> Mod c data Shadow data Inner Inner :: Inner -- | Round the corners of the element rounded :: Length -> Mod c fontSize :: Length -> Mod c -- | Set the text color. See ToColor color :: ToColor clr => clr -> Mod ctx -- | Set the background color. See ToColor bg :: ToColor clr => clr -> Mod ctx bold :: Mod c italic :: Mod c underline :: Mod c -- | Set a border around the element -- -- 
--   el (border 1) "all sides"
--   el (border (X 1)) "only left and right"
--
border :: Sides PxRem -> Mod c -- | Set a border color. See ToColor borderColor :: ToColor clr => clr -> Mod ctx -- | Use a button-like cursor when hovering over the element -- -- Button-like elements: -- -- 
--   btn = pointer . bg Primary . hover (bg PrimaryLight)
--   
--   options = row id $ do
--     el btn "Login"
--     el btn "Sign Up"
--
pointer :: Mod c -- | position:absolute. See stack and popout position :: Position -> Mod c data Position Absolute :: Position Fixed :: Position Sticky :: Position Relative :: Position -- | Set Top, Right, Bottom and Left. Requires position Absolute or -- Fixed. Also see popup offset :: Sides Length -> Mod c zIndex :: Int -> Mod c textAlign :: Align -> Mod c data Align AlignCenter :: Align AlignLeft :: Align AlignRight :: Align AlignJustify :: Align -- | Set the list style of an item -- -- 
--   ol id $ do
--     li (list Decimal) "First"
--     li (list Decimal) "Second"
--     li (list Decimal) "Third"
--
list :: (ToClassName a, Style ListType a) => a -> Mod c data ListType Decimal :: ListType Disc :: ListType -- | Set container display -- -- el (display None) HIDDEN display :: (Style Display a, ToClassName a) => a -> Mod c data Display Block :: Display -- | Animate changes to the given property -- -- 
--   el (transition 100 (Height 400)) "Tall"
--   el (transition 100 (Height 100)) "Small"
--
transition :: Ms -> TransitionProperty -> Mod c data TransitionProperty Width :: PxRem -> TransitionProperty Height :: PxRem -> TransitionProperty BgColor :: HexColor -> TransitionProperty Color :: HexColor -> TransitionProperty -- | Milliseconds, used for transitions data Ms -- | Apply when hovering over an element -- -- 
--   el (bg Primary . hover (bg PrimaryLight)) "Hover"
--
hover :: Mod c -> Mod c -- | Apply when the mouse is pressed down on an element active :: Mod c -> Mod c -- | Apply to even-numbered children even :: Mod c -> Mod c -- | Apply to odd-numbered children odd :: Mod c -> Mod c -- | Apply when the Media matches the current window. This allows for -- responsive designs -- -- 
--   el (width 100 . media (MinWidth 800) (width 400))
--     "Big if window > 800"
--
media :: Media -> Mod c -> Mod c -- | Media allows for responsive designs that change based on -- characteristics of the window. See Layout Example data Media MinWidth :: Int -> Media MaxWidth :: Int -> Media -- | Apply when the element is somewhere inside an anscestor. -- -- For example, the HTMX library applies an "htmx-request" class to the -- body when a request is pending. We can use this to create a loading -- indicator -- -- 
--   el (pad 10) $ do
--     el (parent "htmx-request" flexRow . hide) "Loading..."
--     el (parent "htmx-request" hide . flexRow) "Normal Content"
--
parent :: Text -> Mod c -> Mod c -- | Views have a Reader built-in for convienient access to static -- data, and to add type-safety to view functions. See -- 'Web.View.Element.ListItem and -- https://hackage.haskell.org/package/hyperbole/docs/Web-Hyperbole.html -- -- 
--   numberView :: View Int ()
--   numberView = do
--     num <- context
--     el_ $ do
--       "Number: "
--       text (pack $ show num)
--
context :: View context context -- | Run a view with a specific context in a parent View with -- a different context. -- -- 
--   parentView :: View c ()
--   parentView = do
--     addContext 1 numberView
--     addContext 2 numberView
--     addContext 3 numberView
--
addContext :: context -> View context () -> View c () -- | Create a new element constructor with the given tag name -- -- 
--   aside :: Mod c -> View c () -> View c ()
--   aside = tag "aside"
--
tag :: Text -> Mod c -> View c () -> View c () -- | Set an attribute, replacing existing value -- -- 
--   hlink :: Text -> View c () -> View c ()
--   hlink url content = tag "a" (att "href" url) content
--
att :: Name -> AttValue -> Mod c -- | Options for styles that support specifying various sides. This has a -- "fake" Num instance to support literals -- -- 
--   border 5
--   border (X 2)
--   border (TRBL 0 5 0 0)
--
data Sides a All :: a -> Sides a TRBL :: a -> a -> a -> a -> Sides a X :: a -> Sides a Y :: a -> Sides a XY :: a -> a -> Sides a T :: a -> Sides a R :: a -> Sides a B :: a -> Sides a L :: a -> Sides a -- | Px, converted to Rem. Allows for the user to change the document font -- size and have the app scale accordingly. But allows the programmer to -- code in pixels to match a design data PxRem data Length PxRem :: PxRem -> Length Pct :: Float -> Length -- | ToColor allows you to create a type containing your application's -- colors: -- -- 
--   data AppColor
--     = White
--     | Primary
--     | Dark
--   
--   instance ToColor AppColor where
--     colorValue White = "#FFF"
--     colorValue Dark = "#333"
--     colorValue Primary = "#00F"
--   
--   hello :: View c ()
--   hello = el (bg Primary . color White) "Hello"
--
class ToColor a colorValue :: ToColor a => a -> HexColor colorName :: ToColor a => a -> Text ($dmcolorName) :: (ToColor a, Show a) => a -> Text -- | Hexidecimal Color. Can be specified with or without the leading -- #. Recommended to use an AppColor type instead of manually -- using hex colors. See ToColor newtype HexColor HexColor :: Text -> HexColor data None None :: None -- | A sequence of QueryItems. type Query = [QueryItem]